@syncfusion/ej2-image-editor 20.3.50 → 20.3.56

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.50
+*  version : 20.3.56
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@20.3.48",
+  "_id": "@syncfusion/ej2-image-editor@20.3.50",
   "_inBundle": false,
-  "_integrity": "sha512-wiorIhe8Z3pnWog2Pj0FgkCtduL1PYYRBCGoMOlpMKfFObs06BZvKHOuoW84LvK84Z6DluTEExS6iEGap4ByiQ==",
+  "_integrity": "sha512-GC3GXiioSuat7lNj1+alap+EKHpfZE82vt3zXFUkkLapiv6l0ANzbwAnyDgb26HhgtTw1eRSISKw3WFy2gJxXw==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,21 +23,21 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.3.48.tgz",
-  "_shasum": "00e57bec580b475a0afdee744e70de4dfd3c8053",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.3.50.tgz",
+  "_shasum": "d3a275b9552ab924a714250cea4033a379403075",
   "_spec": "@syncfusion/ej2-image-editor@*",
-  "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
+  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.50",
-    "@syncfusion/ej2-buttons": "~20.3.50",
-    "@syncfusion/ej2-inputs": "~20.3.50",
-    "@syncfusion/ej2-navigations": "~20.3.50",
-    "@syncfusion/ej2-popups": "~20.3.50",
-    "@syncfusion/ej2-splitbuttons": "~20.3.47"
+    "@syncfusion/ej2-base": "~20.3.56",
+    "@syncfusion/ej2-buttons": "~20.3.56",
+    "@syncfusion/ej2-inputs": "~20.3.56",
+    "@syncfusion/ej2-navigations": "~20.3.56",
+    "@syncfusion/ej2-popups": "~20.3.56",
+    "@syncfusion/ej2-splitbuttons": "~20.3.56"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -69,6 +69,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "20.3.50",
+  "version": "20.3.56",
   "sideEffects": false
 }

package/src/image-editor/image-editor-model.d.ts

@@ -1,4 +1,4 @@
-import { NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, extend } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, extend } from '@syncfusion/ej2-base';
 import {Theme,ImageEditorCommands,SaveEventArgs,BeforeSaveEventArgs,ZoomEventArgs,PanEventArgs,CropEventArgs,RotateEventArgs,FlipEventArgs,ShapeChangeEventArgs,ToolbarEventArgs} from "./image-editor";
 
 /**

package/src/image-editor/image-editor.d.ts

@@ -414,6 +414,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      * @returns {void}.
      */
     private unwireEvent;
+    private destroySubComponents;
     private updateTheme;
     private toPascalCase;
     private createCanvas;
@@ -563,6 +564,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private drawPen;
     private getObjDetails;
     private isPointsInRange;
+    private rotateMultiple;
     /**
      * Clear a current selection.
      *
@@ -651,9 +653,18 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      *
      * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
      *
-     *  @returns {void}.
+     * @returns {void}.
+     * @private
      */
     freeHandDraw(value: boolean): void;
+    /**
+     * Enable or disable a freehand drawing in an Image Editor.
+     *
+     * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
+     *
+     * @returns {void}.
+     */
+    freehandDraw(value: boolean): void;
     /**
      * Enable or disable a panning on the Image Editor.
      *

package/src/image-editor/image-editor.js

@@ -24,7 +24,7 @@ import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { ColorPicker, Uploader } from '@syncfusion/ej2-inputs';
 import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
-import { compile, compile as templateCompiler, Browser } from '@syncfusion/ej2-base';
+import { compile, compile as templateCompiler, Browser, detach, select } from '@syncfusion/ej2-base';
 /**
  * Image Editor is a graphical user interface that helps to edit an image by performing actions like selection,
  * cropping, rotating, inserting text and shapes (rectangles, ellipses, lines), and drawing free hand on top of an image.
@@ -262,6 +262,7 @@ var ImageEditor = /** @class */ (function (_super) {
         if (!this.element.getAttribute('class')) {
             this.element.removeAttribute('class');
         }
+        this.destroySubComponents();
         this.unwireEvent();
         _super.prototype.destroy.call(this);
         this.element.innerHTML = '';
@@ -328,6 +329,27 @@ var ImageEditor = /** @class */ (function (_super) {
         EventHandler.remove(this.lowerCanvas, 'mouseup', this.canvasMouseUpHandler);
         EventHandler.remove(document, 'mouseup', this.canvasMouseUpHandler);
     };
+    ImageEditor.prototype.destroySubComponents = function () {
+        var inputElement = this.element.querySelectorAll('input.e-control');
+        var divElement = this.element.querySelectorAll('div.e-control:not(.e-handle)');
+        var btnElement = this.element.querySelectorAll('button.e-control');
+        for (var i = 0, len = inputElement.length; i < len; i++) {
+            if (inputElement[i].classList.contains('e-color-picker')) {
+                getComponent(inputElement[i], 'color-picker').destroy();
+                detach(select('input#' + inputElement[i].id, this.element));
+            }
+        }
+        for (var i = 0, len = btnElement.length; i < len; i++) {
+            if (btnElement[i].classList.contains('e-dropdown-btn')) {
+                getComponent(btnElement[i], 'dropdown-btn').destroy();
+                detach(select('button#' + btnElement[i].id, this.element));
+            }
+            else if (btnElement[i].classList.contains('e-btn')) {
+                getComponent(btnElement[i], 'btn').destroy();
+                detach(select('button#' + btnElement[i].id, this.element));
+            }
+        }
+    };
     ImageEditor.prototype.updateTheme = function () {
         if (this.theme !== '') {
             this.theme = this.toPascalCase(this.theme);
@@ -1057,7 +1079,9 @@ var ImageEditor = /** @class */ (function (_super) {
                             args.element.parentElement.offsetHeight + 'px';
                     }
                     var activeBtn = spanElem_1.innerHTML;
-                    args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                    if (activeBtn !== '') {
+                        args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                    }
                 },
                 select: function (args) {
                     spanElem_1.textContent = args.item.text;
@@ -1673,75 +1697,9 @@ var ImageEditor = /** @class */ (function (_super) {
                     }
                     this.callMainToolbar(false);
                     break;
-                case 'text':
-                    this.currObjType.isCustomCrop = false;
-                    imageEditorObj.drawShapeText();
-                    this.refreshToolbar(type);
-                    break;
-                case 'pen':
-                    this.currObjType.isCustomCrop = false;
-                    this.freeHandDraw(true);
-                    this.refreshToolbar(type);
-                    break;
                 case 'reset':
                     imageEditorObj.reset();
                     break;
-                case 'load':
-                    break;
-                case 'save':
-                    break;
-                case 'select':
-                    break;
-                case 'bold':
-                    this.currObjType.isCustomCrop = false;
-                    if (!this.isBoldbtn) {
-                        this.activeObj.textSettings.bold = true;
-                        this.isBoldbtn = true;
-                        this.redrawText(ratio);
-                    }
-                    else {
-                        this.activeObj.textSettings.bold = false;
-                        this.isBoldbtn = false;
-                        this.redrawText(ratio);
-                    }
-                    break;
-                case 'italic':
-                    this.currObjType.isCustomCrop = false;
-                    if (!this.isItalicbtn) {
-                        this.activeObj.textSettings.italic = true;
-                        if (this.activeObj.textSettings.bold) {
-                            this.upperContext.font = 'italic bold ' + this.activeObj.textSettings.fontSize + 'px' +
-                                ' ' + this.activeObj.textSettings.fontFamily;
-                        }
-                        else {
-                            this.upperContext.font = 'italic ' + this.activeObj.textSettings.fontSize + 'px' + ' ' +
-                                this.activeObj.textSettings.fontFamily;
-                        }
-                        var width = this.upperContext.measureText(this.activeObj.keyHistory).width +
-                            this.activeObj.textSettings.fontSize * 0.5;
-                        var height = this.activeObj.textSettings.fontSize + this.activeObj.textSettings.fontSize * 0.25;
-                        this.setTextSelection(width, height);
-                        this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
-                        this.redrawShape(this.activeObj);
-                        this.isItalicbtn = true;
-                    }
-                    else {
-                        this.activeObj.textSettings.italic = false;
-                        if (this.activeObj.textSettings.bold) {
-                            this.upperContext.font = 'bold ' + this.activeObj.textSettings.fontSize + 'px' + ' ' + this.activeObj.textSettings.fontFamily;
-                        }
-                        else {
-                            this.upperContext.font = this.activeObj.textSettings.fontSize + 'px' + ' ' + this.activeObj.textSettings.fontFamily;
-                        }
-                        var width = this.upperContext.measureText(this.activeObj.keyHistory).width +
-                            this.activeObj.textSettings.fontSize * 0.5;
-                        var height = this.activeObj.textSettings.fontSize + this.activeObj.textSettings.fontSize * 0.25;
-                        this.setTextSelection(width, height);
-                        this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
-                        this.redrawShape(this.activeObj);
-                        this.isItalicbtn = false;
-                    }
-                    break;
             }
         }
         this.trigger('toolbarItemClicked', args);
@@ -2930,7 +2888,7 @@ var ImageEditor = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        var xform = new DOMMatrix();
+        var xform = new DOMMatrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
         ctx.getTransform = function () {
             return xform;
         };
@@ -2971,7 +2929,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var transform = ctx.transform;
         ctx.transform = function (a, b, c, d, e, f) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var m2 = new DOMMatrix();
+            var m2 = new DOMMatrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
             m2.a = a;
             m2.b = b;
             m2.c = c;
@@ -6099,22 +6057,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.updateActiveObject(ratio, this.objColl[i].activePoint, this.objColl[i]);
             }
         }
-        else if (degree === 'zoom') {
-            for (var i = 0; i < this.objColl.length; i++) {
-                this.objColl[i].activePoint.startX /= ratio.width;
-                this.objColl[i].activePoint.startY /= ratio.height;
-                this.objColl[i].activePoint.endX /= ratio.width;
-                this.objColl[i].activePoint.endY /= ratio.height;
-                this.objColl[i].activePoint.height = this.objColl[i].activePoint.endX - this.objColl[i].activePoint.startX;
-                this.objColl[i].activePoint.width = this.objColl[i].activePoint.endY - this.objColl[i].activePoint.startY;
-                this.objColl[i].activePoint.startX *= ratio.width;
-                this.objColl[i].activePoint.startY *= ratio.height;
-                this.objColl[i].activePoint.endX *= ratio.width;
-                this.objColl[i].activePoint.endY *= ratio.height;
-                this.objColl[i].activePoint.width = this.objColl[i].activePoint.endX - this.objColl[i].activePoint.startX;
-                this.objColl[i].activePoint.height = this.objColl[i].activePoint.endY - this.objColl[i].activePoint.startY;
-            }
-        }
     };
     ImageEditor.prototype.calcCurrPoints = function (degree, obj) {
         var oldRatio = this.calcPrevRatio();
@@ -6450,6 +6392,51 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         return inRange;
     };
+    ImageEditor.prototype.rotateMultiple = function (length, degree) {
+        for (var i = 0; i < length; i++) {
+            if (degree > 0) {
+                this.degree += 90;
+            }
+            else {
+                this.degree -= 90;
+            }
+            if (this.degree === 360) {
+                this.degree = 0;
+            }
+            this.lowerContext.save();
+            this.setMaximumDimension(90 * (i + 1));
+            this.lowerContext.translate(this.lowerCanvas.width / 2, this.lowerCanvas.height / 2);
+            if (degree > 0) {
+                this.lowerContext.rotate(Math.PI / 180 * 90);
+            }
+            else {
+                this.lowerContext.rotate(Math.PI / 180 * -90);
+            }
+            this.lowerCanvas.style.left = this.upperCanvas.style.left = (this.element.clientWidth - parseInt(this.lowerCanvas.style.maxWidth, 10) - 18) / 2 + 1 + 'px';
+            this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.clientHeight - this.toolbarHeight - parseInt(this.lowerCanvas.style.maxHeight, 10)) / 2 + 1 + 'px';
+            this.lowerContext.drawImage(this.inMemoryCanvas, -this.lowerCanvas.height / 2, -this.lowerCanvas.width / 2);
+            if (degree > 0) {
+                this.lowerContext.rotate(Math.PI / 180 * -90);
+            }
+            else {
+                this.lowerContext.rotate(Math.PI / 180 * 90);
+            }
+            this.lowerContext.translate(-this.lowerCanvas.width / 2, -this.lowerCanvas.height / 2);
+            this.lowerContext.restore();
+            this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.inMemoryCanvas.width = this.currImgData.width;
+            this.inMemoryCanvas.height = this.currImgData.height;
+            this.inMemoryContext.putImageData(this.currImgData, 0, 0);
+            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+            if (degree > 0) {
+                this.redrawObj(90);
+            }
+            else {
+                this.redrawObj(-90);
+            }
+        }
+    };
     /**
      * Clear a current selection.
      *
@@ -6898,8 +6885,6 @@ var ImageEditor = /** @class */ (function (_super) {
             isRotate = true;
             var transitionArgs = { degree: degree };
             this.trigger('rotating', transitionArgs);
-            this.rotateMethod = true;
-            this.lastAction = 'rotate';
             var splitWords = [];
             var activeObjShape = void 0;
             if (!isNullOrUndefined(this.activeObj.activePoint)) {
@@ -6911,32 +6896,40 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
             }
             this.redrawActObj();
+            var factor = this.factor;
             if (this.factor !== 1) {
                 this.lowerContext.setTransform(1, 0, 0, 1, 0, 0);
                 this.upperContext.setTransform(1, 0, 0, 1, 0, 0);
                 this.factor = 1;
                 this.refreshToolbar('main');
             }
-            this.degree += degree;
-            if (this.degree === 360) {
-                this.degree = 0;
+            var length_1 = Math.abs(degree / 90);
+            if (length_1 > 1) {
+                this.rotateMultiple(length_1, degree);
+            }
+            else {
+                this.degree += degree;
+                if (this.degree === 360) {
+                    this.degree = 0;
+                }
+                this.lowerContext.save();
+                this.setMaximumDimension(this.degree);
+                this.lowerContext.translate(this.lowerCanvas.width / 2, this.lowerCanvas.height / 2);
+                this.lowerContext.rotate(Math.PI / 180 * degree);
+                this.lowerCanvas.style.left = this.upperCanvas.style.left = (this.element.clientWidth - parseInt(this.lowerCanvas.style.maxWidth, 10) - 18) / 2 + 1 + 'px';
+                this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.clientHeight - this.toolbarHeight - parseInt(this.lowerCanvas.style.maxHeight, 10)) / 2 + 1 + 'px';
+                this.lowerContext.drawImage(this.inMemoryCanvas, -this.lowerCanvas.height / 2, -this.lowerCanvas.width / 2);
+                this.lowerContext.rotate(Math.PI / 180 * -degree);
+                this.lowerContext.translate(-this.lowerCanvas.width / 2, -this.lowerCanvas.height / 2);
+                this.lowerContext.restore();
+                this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.inMemoryCanvas.width = this.currImgData.width;
+                this.inMemoryCanvas.height = this.currImgData.height;
+                this.inMemoryContext.putImageData(this.currImgData, 0, 0);
+                this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+                this.redrawObj(degree);
             }
-            this.lowerContext.save();
-            this.setMaximumDimension(this.degree);
-            this.lowerContext.translate(this.lowerCanvas.width / 2, this.lowerCanvas.height / 2);
-            this.lowerContext.rotate(Math.PI / 180 * degree);
-            this.lowerCanvas.style.left = this.upperCanvas.style.left = (this.element.clientWidth - parseInt(this.lowerCanvas.style.maxWidth, 10) - 18) / 2 + 1 + 'px';
-            this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.clientHeight - this.toolbarHeight - parseInt(this.lowerCanvas.style.maxHeight, 10)) / 2 + 1 + 'px';
-            this.lowerContext.drawImage(this.inMemoryCanvas, -this.lowerCanvas.height / 2, -this.lowerCanvas.width / 2);
-            this.lowerContext.rotate(Math.PI / 180 * -degree);
-            this.lowerContext.translate(-this.lowerCanvas.width / 2, -this.lowerCanvas.height / 2);
-            this.lowerContext.restore();
-            this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            this.inMemoryCanvas.width = this.currImgData.width;
-            this.inMemoryCanvas.height = this.currImgData.height;
-            this.inMemoryContext.putImageData(this.currImgData, 0, 0);
-            this.redrawObj(degree);
             if (!isNullOrUndefined(activeObjShape)) {
                 if (activeObjShape === 'custom') {
                     var endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
@@ -6952,11 +6945,11 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.factor = 1;
             if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('rotate', degree, this.objColl);
+                this.updateUndoRedoColl('rotate', degree, this.objColl, null);
             }
             this.isUndoRedo = false;
+            this.refreshToolbar('main');
         }
-        this.rotateMethod = false;
         return isRotate;
     };
     /**
@@ -6989,8 +6982,8 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             type = type ? type : 'Png';
             this.redrawActObj();
-            var beforeSave = { cancel: false, fileName: 'ImageEditor', fileType: type };
-            var saved_1 = { fileName: 'ImageEditor', fileType: type };
+            var beforeSave = { cancel: false, fileName: fileName ? fileName : 'ImageEditor', fileType: type };
+            var saved_1 = { fileName: fileName ? fileName : 'ImageEditor', fileType: type };
             this.trigger('beforeSave', beforeSave, function (observableSaveArgs) {
                 if (!observableSaveArgs.cancel) {
                     fileName = observableSaveArgs.fileName ? observableSaveArgs.fileName : fileName;
@@ -7100,7 +7093,8 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
      *
-     *  @returns {void}.
+     * @returns {void}.
+     * @private
      */
     ImageEditor.prototype.freeHandDraw = function (value) {
         if (value) {
@@ -7114,6 +7108,16 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         this.refreshToolbar('pen');
     };
+    /**
+     * Enable or disable a freehand drawing in an Image Editor.
+     *
+     * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
+     *
+     * @returns {void}.
+     */
+    ImageEditor.prototype.freehandDraw = function (value) {
+        this.freeHandDraw(value);
+    };
     /**
      * Enable or disable a panning on the Image Editor.
      *
@@ -7394,7 +7398,15 @@ var ImageEditor = /** @class */ (function (_super) {
             isSelected = true;
             this.activeObj = obj;
             this.redrawShape(this.activeObj);
-            this.refreshToolbar('shapes');
+            if (this.activeObj.shape === 'text') {
+                this.refreshToolbar('text');
+            }
+            else if (this.activeObj.shape === 'pen') {
+                this.refreshToolbar('pen');
+            }
+            else {
+                this.refreshToolbar('shapes');
+            }
             this.updateToolbarItems(this.calcRatio());
         }
         return isSelected;
@@ -7506,7 +7518,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.canUndo = function () {
-        return _super.prototype.canUndo.call(this);
+        return false;
     };
     /**
      * To check whether the redo collection is empty or not.
@@ -7515,7 +7527,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.canRedo = function () {
-        return _super.prototype.canRedo.call(this);
+        return false;
     };
     /**
      * Erases all the signature strokes signed by user.
@@ -7524,7 +7536,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.clear = function () {
-        _super.prototype.clear.call(this);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.clear.call(this);
+        }
     };
     /**
      * To draw the signature based on the given text, with the font family and font size.
@@ -7537,7 +7551,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.draw = function (text, fontFamily, fontSize) {
-        _super.prototype.draw.call(this, text, fontFamily, fontSize);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.draw.call(this, text, fontFamily, fontSize);
+        }
     };
     /**
      * To get the signature as Blob.
@@ -7547,7 +7563,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.getBlob = function (url) {
-        return _super.prototype.getBlob.call(this, url);
+        return null;
     };
     /**
      * To check whether the signature is empty or not.
@@ -7556,7 +7572,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.isEmpty = function () {
-        return _super.prototype.isEmpty.call(this);
+        return false;
     };
     /**
      * To load the signature with the given base 64 string, height and width.
@@ -7568,7 +7584,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.load = function (signature, width, height) {
-        _super.prototype.load.call(this, signature, width, height);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.load.call(this, signature, width, height);
+        }
     };
     /**
      * Undo the last user action.
@@ -7577,7 +7595,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.undo = function () {
-        _super.prototype.undo.call(this);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.undo.call(this);
+        }
     };
     /**
      * Redo the last user action.
@@ -7586,7 +7606,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.redo = function () {
-        _super.prototype.redo.call(this);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.redo.call(this);
+        }
     };
     /**
      * To save the signature with the given file type and file name.
@@ -7598,7 +7620,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.save = function (type, fileName) {
-        _super.prototype.save.call(this, type, fileName);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.save.call(this, type, fileName);
+        }
     };
     /**
      * To save the signature as Blob.
@@ -7607,7 +7631,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.saveAsBlob = function () {
-        return _super.prototype.saveAsBlob.call(this);
+        return null;
     };
     /**
      * Returns the persistence data for component.
@@ -7616,7 +7640,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.getLocalData = function () {
-        return _super.prototype.getLocalData.call(this);
+        return null;
     };
     var ImageEditor_1;
     __decorate([

package/styles/image-editor/bootstrap-dark.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap-dark-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap-dark-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';

package/styles/image-editor/bootstrap.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap-definition.scss';
 @import 'bootstrap-definition.scss';

package/styles/image-editor/bootstrap4.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap4-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap4-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap4-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap4-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap4-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap4-definition.scss';
 @import 'bootstrap4-definition.scss';

package/styles/image-editor/bootstrap5-dark.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap5-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap5-dark-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap5-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap5-dark-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap5-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap5-dark-definition.scss';
 @import 'bootstrap5-dark-definition.scss';

package/styles/image-editor/bootstrap5.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap5-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap5-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap5-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap5-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap5-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';
 @import 'bootstrap5-definition.scss';

package/styles/image-editor/fabric-dark.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/fabric-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/fabric-dark-definition.scss';
 @import 'ej2-popups/styles/tooltip/fabric-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/fabric-dark-definition.scss';
 @import 'ej2-navigations/styles/toolbar/fabric-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/fabric-dark-definition.scss';
 @import 'fabric-dark-definition.scss';

package/styles/image-editor/fabric.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/fabric-definition.scss';
 @import 'ej2-inputs/styles/uploader/fabric-definition.scss';
 @import 'ej2-popups/styles/tooltip/fabric-definition.scss';
+@import 'ej2-inputs/styles/color-picker/fabric-definition.scss';
 @import 'ej2-navigations/styles/toolbar/fabric-definition.scss';
 @import 'ej2-popups/styles/spinner/fabric-definition.scss';
 @import 'fabric-definition.scss';

package/styles/image-editor/fluent-dark.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/fluent-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/fluent-dark-definition.scss';
 @import 'ej2-popups/styles/tooltip/fluent-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/fluent-dark-definition.scss';
 @import 'ej2-navigations/styles/toolbar/fluent-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/fluent-dark-definition.scss';
 @import 'fluent-dark-definition.scss';

package/styles/image-editor/fluent.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/fluent-definition.scss';
 @import 'ej2-inputs/styles/uploader/fluent-definition.scss';
 @import 'ej2-popups/styles/tooltip/fluent-definition.scss';
+@import 'ej2-inputs/styles/color-picker/fluent-definition.scss';
 @import 'ej2-navigations/styles/toolbar/fluent-definition.scss';
 @import 'ej2-popups/styles/spinner/fluent-definition.scss';
 @import 'fluent-definition.scss';