@syncfusion/ej2-image-editor 31.2.16 → 32.1.19

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 31.2.16
-*  Copyright Syncfusion Inc. 2001 - 2025. 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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _imageeditor from '@syncfusion/ej2-image-editor';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-image-editor",
-  "version": "31.2.16",
+  "version": "32.1.19",
   "description": "Essential JS 2 ImageEditor",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-image-editor.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.12",
-    "@syncfusion/ej2-buttons": "~31.2.16",
-    "@syncfusion/ej2-dropdowns": "~31.2.16",
-    "@syncfusion/ej2-inputs": "~31.2.15",
-    "@syncfusion/ej2-navigations": "~31.2.16",
-    "@syncfusion/ej2-popups": "~31.2.12",
-    "@syncfusion/ej2-splitbuttons": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.19",
+    "@syncfusion/ej2-dropdowns": "~32.1.19",
+    "@syncfusion/ej2-inputs": "~32.1.19",
+    "@syncfusion/ej2-navigations": "~32.1.19",
+    "@syncfusion/ej2-popups": "~32.1.19",
+    "@syncfusion/ej2-splitbuttons": "~32.1.19"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -4129,7 +4129,7 @@ var Draw = /** @class */ (function () {
             this.errorLoading();
             parent.showDialogPopup('unsupported', fileTypeError);
             if (dropArea && !parent.isImageLoaded) {
-                dropArea.style.display = 'block';
+                dropArea.style.display = 'flex';
             }
         }
         else {

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

@@ -65,12 +65,8 @@ var Export = /** @class */ (function () {
             type = type ? type : 'Png';
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: null } });
-            var imageQualityObj = { currentImageQuality: 1 };
-            if (type.toLowerCase() === 'jpeg') {
-                parent.notify('toolbar', { prop: 'getcurrentImageQuality', onPropertyChange: false, value: { obj: imageQualityObj } });
-            }
             var beforeSave = { cancel: false, fileName: fileName ? fileName : imageName,
-                fileType: type, imageQuality: imgQuality || imageQualityObj['currentImageQuality'] };
+                fileType: type, imageQuality: imgQuality };
             parent.trigger('beforeSave', beforeSave);
             this.beforeSaveEvent(beforeSave, type, fileName, imageName, imgQuality);
         }

package/src/image-editor/action/freehand-draw.js

@@ -1164,11 +1164,6 @@ var FreehandDrawing = /** @class */ (function () {
         var parent = this.parent;
         var point = parent.pointColl[this.fhdSelIdx];
         parent.trigger('shapeChanging', shapeChangingArgs);
-        if (shapeChangingArgs.cancel) {
-            parent.editCompleteArgs = shapeChangingArgs;
-            this.cancelFhd();
-            return;
-        }
         if (parent.element.getAttribute('data-value') === 'mask-drawing' && !this.isMasking) {
             this.isMasking = true;
             parent.upperCanvas.style.cursor = 'crosshair';

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

@@ -3209,6 +3209,10 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.mouseDownEventHandler = function (e) {
         var parent = this.parent;
+        if (parent.isSafari && e.buttons === 0 && (this.parent.isShapeDrawing || this.parent.togglePen) && this.parent.drawingShape !== 'path') {
+            e.stopImmediatePropagation();
+            return;
+        }
         parent.isKBDNavigation = false;
         this.mouseDown = e.currentTarget === parent.lowerCanvas || e.currentTarget === parent.upperCanvas ?
             'canvas' : '';
@@ -3486,9 +3490,6 @@ var Selection = /** @class */ (function () {
                 var objColl = extend([], parent.objColl, [], true);
                 if (!isNullOrUndefined(obj['index']) && obj['index'] > -1) {
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { type: 'ok' } });
-                    if (!this.isFhdPoint) {
-                        return;
-                    }
                     parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
                         value: { strokeColor: null, strokeWidth: null } });
                     parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
@@ -4033,9 +4034,7 @@ var Selection = /** @class */ (function () {
                 this.currentDrawingShape = parent.drawingShape.toLowerCase();
                 if (dummyClick) {
                     parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
-                    if (parent.cursor !== 'move') {
-                        parent.upperCanvas.style.cursor = 'crosshair';
-                    }
+                    parent.upperCanvas.style.cursor = 'crosshair';
                 }
             }
             parent.isShapeDrawing = false;
@@ -5057,14 +5056,7 @@ var Selection = /** @class */ (function () {
                 }
                 if (!this.isCropSelection && parent.activeObj.shape !== 'redact') {
                     parent.trigger('shapeChanging', shapeChangingArgs);
-                    if (shapeChangingArgs.cancel) {
-                        parent.objColl.splice(i, 0, temp);
-                        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
-                    }
-                    else {
-                        this.shapeEvent(shapeChangingArgs);
-                    }
+                    this.shapeEvent(shapeChangingArgs);
                     parent.editCompleteArgs = shapeChangingArgs;
                 }
                 else {

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

@@ -10,7 +10,6 @@ export declare class Shape {
     private shapeImg;
     private preventFrameAnnotation;
     private redactType;
-    private isPublicUpdateShape;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;

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

@@ -8,7 +8,6 @@ var Shape = /** @class */ (function () {
         this.keyHistory = ''; // text history
         this.preventFrameAnnotation = false;
         this.redactType = 'blur';
-        this.isPublicUpdateShape = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -282,9 +281,6 @@ var Shape = /** @class */ (function () {
             case 'setRedactType':
                 this.redactType = args.value['redactType'];
                 break;
-            case 'setPublicUpdateShape':
-                this.isPublicUpdateShape = args.value['isPublicUpdateShape'];
-                break;
         }
     };
     Shape.prototype.getModuleName = function () {
@@ -311,7 +307,7 @@ var Shape = /** @class */ (function () {
         this.textSettings =
             { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
-        this.preventFrameAnnotation = this.isPublicUpdateShape = false;
+        this.preventFrameAnnotation = false;
     };
     Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         this.initializeShape('ellipse');
@@ -1024,7 +1020,7 @@ var Shape = /** @class */ (function () {
         }
         parent.notify('selection', { prop: 'setTextSelection', onPropertyChange: false,
             value: { width: width, height: height } });
-        if (parent.activeObj.rotatedAngle !== 0 && !this.isPublicUpdateShape) {
+        if (parent.activeObj.rotatedAngle !== 0) {
             var width_1 = parent.activeObj.activePoint.width - tempActiveObj.activePoint.width;
             var height_1 = parent.activeObj.activePoint.height - tempActiveObj.activePoint.height;
             var value = '';
@@ -1043,20 +1039,6 @@ var Shape = /** @class */ (function () {
             parent.notify('shape', { prop: 'updateFontSize', onPropertyChange: false,
                 value: { obj: parent.activeObj } });
         }
-        else if (this.isPublicUpdateShape) {
-            var width_2 = parent.activeObj.activePoint.width - tempActiveObj.activePoint.width;
-            var height_2 = parent.activeObj.activePoint.height - tempActiveObj.activePoint.height;
-            var value = '';
-            if (parent.transform.degree === 0 || parent.transform.degree === 180) {
-                value = 'width';
-            }
-            else if (parent.transform.degree === 90 || parent.transform.degree === 270) {
-                value = 'height';
-            }
-            parent.activeObj.activePoint = extend({}, tempActiveObj.activePoint, {}, true);
-            parent.notify('selection', { prop: 'adjustRotationPoints', onPropertyChange: false, value: { rectangle: parent.activeObj.activePoint,
-                    x: width_2, y: height_2, angle: parent.activeObj.rotatedAngle, type: 'text', elem: value } });
-        }
         parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: parent.activeObj.activePoint, obj: parent.activeObj,
                 isMouseMove: null, x: null, y: null } });
         this.updImgRatioForActObj();

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

@@ -937,12 +937,10 @@ var ImageEditor = /** @class */ (function (_super) {
         var dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area' });
         dropAreaElement.style.position = 'relative';
         var dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image' });
-        dropIconElement.style.position = 'absolute';
         var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content' });
-        dropContentElement.style.cssText = 'position: absolute; display: none;';
+        dropContentElement.style.cssText = 'display: none;';
         dropContentElement.textContent = dragObj['value'] + ' ';
         var minDropContentElem = this.createElement('span', { className: 'e-ie-min-drop-content' });
-        minDropContentElem.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'];
@@ -952,7 +950,7 @@ var ImageEditor = /** @class */ (function (_super) {
         minDropContentElem.appendChild(minDropAnchorElem);
         dropAnchorElement.href = '';
         minDropAnchorElem.href = '';
-        var dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
+        var dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info' });
         this.updateDropInfoContent(dropInfoElement);
         var dropUploader = dropAreaElement.appendChild(this.createElement('input', {
             id: this.element.id + '_dropfileUpload', className: 'e-fileUpload e-image-upload'
@@ -1817,9 +1815,6 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.updateShape = function (setting, isSelected) {
-        if (setting.type.toLowerCase() === 'text') {
-            this.notify('shape', { prop: 'setPublicUpdateShape', onPropertyChange: false, value: { isPublicUpdateShape: true } });
-        }
         var obj = { isSelected: false };
         var isTextArea = false;
         var freehandObj = { bool: false };
@@ -1891,9 +1886,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
             }
         }
-        if (setting.type.toLowerCase() === 'text') {
-            this.notify('shape', { prop: 'setPublicUpdateShape', onPropertyChange: false, value: { isPublicUpdateShape: false } });
-        }
         return obj['isSelected'];
     };
     /**
@@ -2524,7 +2516,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
         var dropArea = document.getElementById(this.element.id + '_dropArea');
         if (dropArea) {
-            dropArea.style.display = 'block';
+            dropArea.style.display = 'flex';
         }
     };
     // AI related codes

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

@@ -280,9 +280,6 @@ var ToolbarModule = /** @class */ (function () {
             case 'getToolbarHeight':
                 args.value['obj']['toolbarHeight'] = this.toolbarHeight;
                 break;
-            case 'getcurrentImageQuality':
-                args.value['obj']['currentImageQuality'] = this.currentQuality;
-                break;
             case 'setToolbarHeight':
                 if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') > -1)) {
                     this.toolbarHeight = args.value['height'];
@@ -5097,10 +5094,10 @@ var ToolbarModule = /** @class */ (function () {
                         isDisabled = order > orderObj['order'] ? true : false;
                     }
                     if (isDisabled) {
-                        document.getElementById(parent.element.id + '_bringToFront').classList.add('e-overlay');
+                        document.getElementById(parent.element.id + '_bringToFront').parentElement.classList.add('e-overlay');
                     }
                     else {
-                        document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-overlay');
+                        document.getElementById(parent.element.id + '_bringToFront').parentElement.classList.remove('e-overlay');
                     }
                     parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                     break;
@@ -6047,29 +6044,25 @@ var ToolbarModule = /** @class */ (function () {
         }
         hdrWrapper = canvasWrapper.appendChild(parent.createElement('div', {
             id: id + '_headWrapper',
+            className: 'e-ie-head-wrapper',
             styles: 'position: relative'
         }));
         if (type === 'transparency') {
             labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_labelWrapper',
-                className: 'e-ie-finetune-slider-label',
-                styles: Browser.isDevice ? 'position: absolute; top: 31%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
-                    : 'position: absolute; top: 31%; left: calc(50% - 220px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                className: 'e-ie-finetune-slider-label'
             }));
         }
         else {
             labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_labelWrapper',
-                className: 'e-ie-finetune-slider-label',
-                styles: Browser.isDevice ? ('position: absolute; top: 31%; left: calc(50% - 160px); font-size: 15px; text-transform: capitalize; font-weight: 400;')
-                    : 'position: absolute; top: 25%; left: calc(50% - 226px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                className: 'e-ie-finetune-slider-label'
             }));
         }
         labelWrapper.textContent = this.l10n.getConstant(parent.toPascalCase(type === 'transparency' ? 'opacity' : type));
         var sliderWrapper = hdrWrapper.appendChild(parent.createElement('div', {
             id: id + '_sliderWrapper',
-            className: 'e-ie-finetune-slider-wrap',
-            styles: 'position: absolute'
+            className: 'e-ie-finetune-slider-wrap'
         }));
         var value = parent.getCurrAdjustmentValue(type);
         if (isSelect && type === 'straighten' && Browser.isDevice) {
@@ -6147,8 +6140,7 @@ var ToolbarModule = /** @class */ (function () {
         if (type === 'straighten' && Browser.isDevice) {
             var sLabelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_sLabelWrapper',
-                className: 'e-ie-straighten-value-span e-ie-finetune-value-span',
-                styles: 'position: absolute; top: 31%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                className: 'e-ie-straighten-value-span e-ie-finetune-value-span'
             }));
             sLabelWrapper.innerHTML = parent.transform.straighten.toString() + '&#176';
             sliderWrapper.parentElement.classList.add('e-straighten-slider');
@@ -6156,9 +6148,7 @@ var ToolbarModule = /** @class */ (function () {
         if (type !== 'straighten') {
             hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_finetuneSpan',
-                className: 'e-ie-finetune-value-span',
-                styles: Browser.isDevice ? ('position: absolute; top: 25%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;') :
-                    'position: absolute; top: 25%; left: calc(50% + 190px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                className: 'e-ie-finetune-value-span'
             }));
             sliderWrapper.parentElement.classList.add('e-finetune-slider');
             if (type === 'transparency' && Browser.isDevice) {
@@ -6675,26 +6665,22 @@ var ToolbarModule = /** @class */ (function () {
         }
         hdrWrapper = canvasWrapper.appendChild(parent.createElement('div', {
             id: id + '_headWrapper',
+            className: 'e-ie-head-wrapper',
             styles: 'position: relative'
         }));
         labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
             id: id + '_labelWrapper',
-            className: 'e-ie-finetune-slider-label',
-            styles: Browser.isDevice ? ('position: absolute; top: 31%; left: calc(50% - 160px); font-size: 15px; text-transform: capitalize; font-weight: 400;')
-                : 'position: absolute; top: 25%; left: calc(50% - 226px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+            className: 'e-ie-finetune-slider-label'
         }));
         var text = type === 'blur' ? this.l10n.getConstant('Blur') : this.l10n.getConstant('PixelSize');
         labelWrapper.textContent = text;
         var sliderWrapper = hdrWrapper.appendChild(parent.createElement('div', {
             id: id + '_sliderWrapper',
-            className: 'e-ie-finetune-slider-wrap',
-            styles: 'position: absolute'
+            className: 'e-ie-finetune-slider-wrap'
         }));
         hdrWrapper.appendChild(parent.createElement('label', {
             id: id + '_redactSpan',
-            className: 'e-ie-redact-value-span',
-            styles: Browser.isDevice ? ('position: absolute; top: 30%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;') :
-                'position: absolute; top: 30%; left: calc(50% + 190px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+            className: 'e-ie-redact-value-span'
         }));
         sliderWrapper.parentElement.classList.add('e-finetune-slider');
         var value = parent.activeObj.redactType === 'blur' ? parent.activeObj.redactBlur :
@@ -6734,6 +6720,9 @@ var ToolbarModule = /** @class */ (function () {
             var ht = parent.element.querySelector('#' + id + '_canvasWrapper').offsetHeight;
             contextualToolbarArea.style.top = this.toolbarHeight + 1 + ht - cHt + 'px';
         }
+        else {
+            contextualToolbarArea.style.top = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight + 'px';
+        }
     };
     return ToolbarModule;
 }());

package/styles/bds-lite.css

@@ -309,16 +309,6 @@
 .e-device.e-image-editor .e-img-font-style.e-template {
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-device.e-image-editor .e-slider-container {
-  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
-  height: 54px !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-device.e-image-editor .e-straighten-slider {
-  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-device.e-image-editor .e-ie-straighten-value-span {
-  margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-device.e-image-editor .e-hscroll .e-scroll-nav.e-scroll-right-nav, .e-device.e-image-editor .e-scroll-right-overlay {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -363,8 +353,8 @@
   height: calc(100% - 18px);
   width: calc(100% - 20px);
   border: 2px dashed var(--color-sf-fg-secondary);
-  border-radius: 10px;
   margin: 10px;
+  border-radius: 10px;
 }
 .e-image-editor .e-ie-drop-area .e-upload {
   display: none;
@@ -375,24 +365,30 @@
 .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
   top: calc(50% - 60px);
   left: calc(50% - 25px);
+  position: absolute;
 }
 .e-image-editor .e-ie-drop-area .e-ie-drop-content {
   top: 50%;
   left: calc(50% - 160px);
   font-size: 14px;
+  position: absolute;
+}
+.e-image-editor .e-ie-drop-area .e-ie-drop-browse {
+  text-decoration: none;
 }
 .e-image-editor .e-ie-drop-area .e-ie-drop-info {
   top: calc(50% + 40px);
   left: 50%;
+  font-size: 14px;
+  position: absolute;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
-  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;
+  position: absolute;
 }
 .e-image-editor .e-toolbar {
   border: none;
@@ -403,9 +399,14 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
   margin-left: 20px;
   min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  font-size: 12px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
   min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  font-size: 12px;
+}
+.e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-stroke, .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-frame-stroke, .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-size {
+  font-size: 12px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
   font-size: 18px;
@@ -463,6 +464,13 @@
   width: 100%;
   z-index: 1;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-ie-head-wrapper {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  text-align: center;
+  height: auto;
+  min-height: 58px;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
   border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
   height: 130px !important; /* stylelint-disable-line declaration-no-important */
@@ -510,6 +518,7 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
+  font-size: 12px;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
   text-align: center;
@@ -519,9 +528,19 @@
   height: 100px;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
-  margin-left: calc(50% - 137px);
-  height: 54px !important; /* stylelint-disable-line declaration-no-important */
+  margin: 0 16px 1px 16px;
+  height: auto;
+}
+.e-image-editor .e-ie-finetune-slider-wrap {
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-image-editor .e-ie-finetune-slider-label, .e-image-editor .e-ie-finetune-value-span, .e-image-editor .e-ie-redact-value-span {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: normal;
+  font-weight: 400;
 }
+
 .e-ie-straighten-value-span,
 .e-ie-straighten-span,
 .e-ie-toolbar-straighten {
@@ -530,10 +549,18 @@
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-straighten-value-span,
+.e-device.e-image-editor .e-ie-straighten-span,
+.e-device.e-image-editor .e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
+  padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+  padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
-  margin-left: 8px;
   padding-right: 2px;
+  margin-left: 8px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -549,14 +576,6 @@
   top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-ie-finetune-value-span {
-  top: 28% !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-ie-finetune-slider-label {
-  top: 28% !important; /* stylelint-disable-line declaration-no-important */
-}
-
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -566,7 +585,8 @@
 }
 
 .e-ie-slider-wrap {
-  top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
+  top: auto !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-dropdown-popup.e-ie-crop-ddb-popup ul {
@@ -578,10 +598,6 @@
   background: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-device.e-image-editor .e-ie-device-transparency-slider {
-  margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
-}
-
 .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal,
 .e-ie-quality-option-container .e-slider-container.e-horizontal {
   height: 28px;
@@ -640,6 +656,7 @@
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
+  text-align: center;
 }
 
 .e-ie-dlg-right-content {
@@ -648,13 +665,14 @@
 
 .e-ie-img-save-name {
   display: inline-block;
-  margin-right: 10px;
   width: calc(69% - 13px);
+  margin-right: 10px;
 }
 
 .e-ie-img-save-dlg {
   display: inline-block;
-  width: 92px;
+  width: auto;
+  min-width: 92px;
 }
 
 .e-ie-img-save-dlg .e-btn {
@@ -662,8 +680,8 @@
 }
 
 .e-ie-img-label-name {
-  margin-bottom: 5px;
   display: block;
+  margin-bottom: 5px;
 }
 
 .e-ie-img-quality-name {
@@ -714,13 +732,13 @@
 }
 
 .e-ie-img-icon-button {
-  margin-left: 10px;
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   margin-bottom: 3px;
   padding-top: 4px;
   padding-bottom: 4px;
+  margin-left: 10px;
 }
 
 .e-ie-quality-option-container .e-btn-group .e-btn {
@@ -753,24 +771,12 @@
 .e-blr-ie-save-dialog.e-device .e-ie-quality-option-container .e-ie-img-icon-button {
   margin-left: 0;
 }
-.e-blr-ie-save-dialog.e-device .e-slider-container {
-  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
-  height: 28px !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-blr-ie-save-dialog.e-device .e-ie-img-size-value-span {
   margin-left: calc(67% - 100px) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-blr-ie-save-dialog.e-device .e-btn-group .e-btn {
   padding: 0 15px;
 }
-.e-ie-straighten-value-span {
-  margin-left: 7px !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-device.e-image-editor .e-ie-straighten-value-span {
-  margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
-}
-
 @media only screen and (max-width: 390px) {
   .e-device.e-image-editor .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-ie-img-quality-name .e-btn-group .e-btn {
     padding-left: 9px;
@@ -780,17 +786,13 @@
     width: calc(65% - 30px) !important; /* stylelint-disable-line declaration-no-important */
   }
 }
-.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-slider-label {
-  left: calc(50% - 145px) !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
-  width: 170px !important; /* stylelint-disable-line declaration-no-important */
-  margin-left: calc(50% - 62px) !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-value-span {
-  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-slider-label,
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-value-span,
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-redact-value-span {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: normal;
+  font-weight: normal;
 }
 
 .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
@@ -870,7 +872,6 @@
   -webkit-box-shadow: none !important;
           box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
 }
-
 .e-dropdown-popup .e-selected-btn {
   background: var(--color-sf-bg-tertiary) !important; /* stylelint-disable-line declaration-no-important */
 }