@syncfusion/ej2-image-editor 23.1.36 → 23.1.39

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

@@ -21,7 +21,7 @@ import { Component, NotifyPropertyChanges, Property, addClass, removeClass, exte
 import { Event, EventHandler, getComponent, isNullOrUndefined, getUniqueID } from '@syncfusion/ej2-base';
 import { Dialog, createSpinner } from '@syncfusion/ej2-popups';
 import { Complex, Browser, ChildProperty, compile as templateCompiler, compile } from '@syncfusion/ej2-base';
-import { ToolbarModule, Crop, Draw, Filter, FreehandDrawing, Selection, Shape, Transform, UndoRedo, Export } from './../index';
+import { ToolbarModule, Crop, Draw, Filter, FreehandDrawing, Selection, Shape, Transform, UndoRedo, Export, ShapeType } from './../index';
 import { ZoomTrigger, ImageFinetuneOption } from './../index';
 import { Uploader } from '@syncfusion/ej2-inputs';
 /**
@@ -439,6 +439,10 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
         }
         this.createCanvas();
+        if (this.element.offsetWidth > 359 && this.element.querySelector('.e-ie-min-drop-content') && this.element.querySelector('.e-ie-drop-content')) {
+            this.element.querySelector('.e-ie-min-drop-content').style.display = 'none';
+            this.element.querySelector('.e-ie-drop-content').style.display = 'block';
+        }
         this.createDropUploader();
         if (this.showQuickAccessToolbar) {
             var canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
@@ -598,18 +602,26 @@ var ImageEditor = /** @class */ (function (_super) {
         }));
         var dragObj = { key: 'DragText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dragObj } });
+        var dropObj = { key: 'DropText' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dropObj } });
         var browseObj = { key: 'BrowseText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
         var supportObj = { key: 'SupportText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
         var dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area', attrs: { style: 'position: relative;' } });
         var dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image', attrs: { style: 'position: absolute;' } });
-        var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute;' } });
+        var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute; display: none;' } });
         dropContentElement.textContent = dragObj['value'] + ' ';
+        var minDropContentElem = this.createElement('span', { className: 'e-ie-min-drop-content', attrs: { style: 'position: absolute;' } });
+        minDropContentElem.textContent = dropObj['value'] + ' ';
         var dropAnchorElement = this.createElement('a', { id: this.element.id + '_dropBrowse', className: 'e-ie-drop-browse' });
         dropAnchorElement.textContent = browseObj['value'];
+        var minDropAnchorElem = this.createElement('a', { id: this.element.id + '_dropBrowse', className: 'e-ie-drop-browse' });
+        minDropAnchorElem.textContent = browseObj['value'];
         dropContentElement.appendChild(dropAnchorElement);
+        minDropContentElem.appendChild(minDropAnchorElem);
         dropAnchorElement.href = '';
+        minDropAnchorElem.href = '';
         var dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
         dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, and JPG';
         var dropUploader = dropAreaElement.appendChild(this.createElement('input', {
@@ -619,6 +631,7 @@ var ImageEditor = /** @class */ (function (_super) {
         dropUploader.setAttribute('accept', 'image/*');
         dropAreaElement.appendChild(dropIconElement);
         dropAreaElement.appendChild(dropContentElement);
+        dropAreaElement.appendChild(minDropContentElem);
         dropAreaElement.appendChild(dropInfoElement);
         canvasWrapper.appendChild(dropAreaElement);
         this.lowerCanvas = canvasWrapper.appendChild(this.createElement('canvas', {
@@ -1625,7 +1638,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.okBtn = function (isMouseDown) {
-        this.element.querySelector('.e-contextual-toolbar-wrapper').classList.remove('e-frame-wrapper');
+        if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
+            this.element.querySelector('.e-contextual-toolbar-wrapper').classList.remove('e-frame-wrapper');
+        }
         var isCropSelection = false;
         var splitWords;
         var aspectIcon = this.element.querySelector('#' + this.element.id + '_aspectratio');
@@ -1642,6 +1657,17 @@ var ImageEditor = /** @class */ (function (_super) {
             isCropSelection = true;
         }
         this.allowDownScale = true;
+        if ((this.activeObj.shape && this.activeObj.shape !== 'image' || this.togglePen) && !isCropSelection) {
+            var objt = { shapeSettingsObj: {} };
+            this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+            var shapeSettings = objt['shapeSettingsObj'];
+            if (this.togglePen) {
+                shapeSettings.type = ShapeType.FreehandDraw;
+            }
+            var shapeChangedArgs = { action: 'apply', previousShapeSettings: extend({}, shapeSettings, {}, true),
+                currentShapeSettings: extend({}, shapeSettings, {}, true) };
+            this.triggerShapeChanged(shapeChangedArgs);
+        }
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         if (aspectIcon || nonAspectIcon || (isBlazor() && this.currentToolbar === 'resize-toolbar')) {
             var obj_2 = { width: null, height: null };
@@ -1938,6 +1964,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var object = { currObj: {} };
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
         prevObj.objColl = extend([], this.objColl, [], true);
@@ -1974,6 +2003,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
             }
         }
+        var shapeChangedArgs = { action: type, previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Font style for text.
@@ -1987,6 +2019,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var objColl = extend([], this.objColl, [], true);
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -2035,6 +2070,10 @@ var ImageEditor = /** @class */ (function (_super) {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
+        var shapeChangedArgs = { action: 'font-family', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fontFamily = this.textArea.style.fontFamily;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Font size for text.
@@ -2048,6 +2087,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -2127,6 +2169,10 @@ var ImageEditor = /** @class */ (function (_super) {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
+        var shapeChangedArgs = { action: 'font-size', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fontSize = this.activeObj.textSettings.fontSize;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Font color for text.
@@ -2139,6 +2185,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -2186,6 +2235,10 @@ var ImageEditor = /** @class */ (function (_super) {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
+        var shapeChangedArgs = { action: 'font-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fillColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Pen stroke width.
@@ -2199,6 +2252,9 @@ var ImageEditor = /** @class */ (function (_super) {
         var temp = extend([], this.pointColl, [], true);
         this.updateFreehandDrawColorChange();
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -2229,6 +2285,11 @@ var ImageEditor = /** @class */ (function (_super) {
                     previousCropObj: prevCropObj, previousText: null,
                     currentText: null, previousFilter: null, isCircleCrop: null } });
         }
+        shapeSettings.type = ShapeType.FreehandDraw;
+        var shapeChangedArgs = { action: 'stroke-width', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Pen stroke color.
@@ -2242,6 +2303,9 @@ var ImageEditor = /** @class */ (function (_super) {
         var temp = extend([], this.pointColl, [], true);
         this.updateFreehandDrawColorChange();
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -2273,6 +2337,11 @@ var ImageEditor = /** @class */ (function (_super) {
         else if (!this.togglePen) {
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.activeObj } });
         }
+        shapeSettings.type = ShapeType.FreehandDraw;
+        var shapeChangedArgs = { action: 'stroke-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.strokeColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Shape stroke width.
@@ -2284,6 +2353,9 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.updateStrokeWidth = function (id) {
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
+            var obj = { shapeSettingsObj: {} };
+            this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+            var shapeSettings = obj['shapeSettingsObj'];
             this.notify('shape', { prop: 'pushActItemIntoObj' });
             var prevCropObj = extend({}, this.cropObj, {}, true);
             var object = { currObj: {} };
@@ -2308,6 +2380,10 @@ var ImageEditor = /** @class */ (function (_super) {
                     previousCropObj: prevCropObj, previousText: null,
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+            var shapeChangedArgs = { action: 'stroke-width', previousShapeSettings: extend({}, shapeSettings, {}, true),
+                currentShapeSettings: extend({}, shapeSettings, {}, true) };
+            shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
+            this.triggerShapeChanged(shapeChangedArgs);
         }
         else if (this.activeObj.shape && (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length === 0)) {
@@ -2325,6 +2401,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.updateStrokeColor = function (value) {
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
             this.notify('shape', { prop: 'pushActItemIntoObj' });
@@ -2357,6 +2436,10 @@ var ImageEditor = /** @class */ (function (_super) {
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
         }
+        var shapeChangedArgs = { action: 'stroke-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.strokeColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Shape fill color.
@@ -2366,6 +2449,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.updateFillColor = function (value) {
+        var obj = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+        var shapeSettings = obj['shapeSettingsObj'];
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var object = { currObj: {} };
@@ -2390,6 +2476,10 @@ var ImageEditor = /** @class */ (function (_super) {
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: null, isCircleCrop: null } });
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+        var shapeChangedArgs = { action: 'fill-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fillColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply horizontal flip.
@@ -2586,6 +2676,10 @@ var ImageEditor = /** @class */ (function (_super) {
         if (isBlazor() && this.element.querySelector('.place-holder')) {
             this.element.querySelector('.place-holder').remove();
         }
+        if (this.element.offsetWidth > 359 && this.element.querySelector('.e-ie-min-drop-content') && this.element.querySelector('.e-ie-drop-content')) {
+            this.element.querySelector('.e-ie-min-drop-content').style.display = 'none';
+            this.element.querySelector('.e-ie-drop-content').style.display = 'block';
+        }
         if (isBlazor() && this.element.querySelector('.e-ie-drop-area')) {
             this.element.querySelector('.e-ie-drop-area').style.display = 'block';
         }
@@ -2690,6 +2784,19 @@ var ImageEditor = /** @class */ (function (_super) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     ImageEditor.prototype.updateToolbar = function (element, type, value) {
     };
+    /**
+     * Trigger the shapeChanging event for after the shape applied.
+     *
+     * @param { ShapeChangeEventArgs } shapeChangedArgs - Specifies the shapeChaning event args.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.triggerShapeChanged = function (shapeChangedArgs) {
+        if (isBlazor() && this.events && this.events.shapeChanged.hasDelegate === true) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            this.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'ShapeChanged', shapeChangedArgs);
+        }
+    };
     var ImageEditor_1;
     __decorate([
         Property('')

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

@@ -121,6 +121,7 @@ var ToolbarModule = /** @class */ (function () {
             W: 'W',
             H: 'H',
             DragText: 'Drag and drop your image here or',
+            DropText: 'Drop your image here or',
             BrowseText: 'Browse here...',
             SupportText: 'Supports:',
             Frame: 'Frame',

package/styles/bootstrap-dark.css

@@ -294,6 +294,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 42px !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap.css

@@ -294,6 +294,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 42px !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap4.css

@@ -293,6 +293,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap5-dark.css

@@ -306,6 +306,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap5.css

@@ -306,6 +306,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/fabric-dark.css

@@ -294,6 +294,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/fabric.css

@@ -294,6 +294,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/fluent-dark.css

@@ -302,6 +302,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/fluent.css

@@ -302,6 +302,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/highcontrast-light.css

@@ -293,6 +293,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 38px !important; /* stylelint-disable-line declaration-no-important */

package/styles/highcontrast.css

@@ -293,6 +293,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 38px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/_layout.scss

@@ -156,6 +156,12 @@
         position: absolute;
         font-size: 14px;
       }
+
+      & .e-ie-min-drop-content {
+        left: calc(50% - 120px);
+        top: 50%;
+        font-size: 14px;
+      }
     }
 
     & .e-toolbar {

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

@@ -294,6 +294,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 42px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/bootstrap.css

@@ -294,6 +294,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 42px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/bootstrap4.css

@@ -293,6 +293,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

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

@@ -306,6 +306,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/bootstrap5.css

@@ -306,6 +306,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

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

@@ -294,6 +294,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/fabric.css

@@ -294,6 +294,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

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

@@ -302,6 +302,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/fluent.css

@@ -302,6 +302,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/highcontrast-light.css

@@ -293,6 +293,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 38px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/highcontrast.css

@@ -293,6 +293,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 38px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/material-dark.css

@@ -302,6 +302,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/material.css

@@ -307,6 +307,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
   height: 40px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/material3-dark.css

@@ -358,6 +358,11 @@
   position: absolute;
   font-size: 14px;
 }
+.e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
+  left: calc(50% - 120px);
+  top: 50%;
+  font-size: 14px;
+}
 .e-image-editor .e-toolbar {
   border: none;
 }