@syncfusion/ej2-image-editor 29.2.5 → 30.1.37

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

@@ -111,7 +111,9 @@ var ToolbarModule = /** @class */ (function () {
             Path: 'Path',
             Bold: 'Bold',
             Italic: 'Italic',
+            Underline: 'Underline',
             BoldItalic: 'Bold Italic',
+            Strikethrough: 'Strikethrough',
             XSmall: 'X-Small',
             Small: 'Small',
             Medium: 'Medium',
@@ -2185,12 +2187,16 @@ var ToolbarModule = /** @class */ (function () {
         if (!Browser.isDevice) {
             var obj = { shape: null };
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
-            if (obj['shape'] !== 'path') {
+            if (obj['shape'] === 'path') {
+                toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+                    tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0, disabled: true });
+            }
+            else {
                 toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                     tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
-                toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
-                    tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
             }
+            toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+                tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
@@ -2846,6 +2852,14 @@ var ToolbarModule = /** @class */ (function () {
             toolbarItems.push({ id: id + '_italic', prefixIcon: 'e-icons e-italic', cssClass: 'top-icon e-italic',
                 tooltipText: this.l10n.getConstant('Italic'), align: 'Center' });
         }
+        if (items.indexOf('underline') > -1) {
+            toolbarItems.push({ id: id + '_underline', prefixIcon: 'e-icons e-underline', cssClass: 'top-icon e-underline',
+                tooltipText: this.l10n.getConstant('Underline'), align: 'Center' });
+        }
+        if (items.indexOf('strikethrough') > -1) {
+            toolbarItems.push({ id: id + '_strikethrough', prefixIcon: 'e-icons e-strikethrough', cssClass: 'top-icon e-strikethrough',
+                tooltipText: this.l10n.getConstant('Strikethrough'), align: 'Center' });
+        }
         if (items.indexOf('strokeWidth') > -1) {
             toolbarItems.push({ id: id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('TextOutlineWidth'), align: 'Center',
                 type: 'Input', template: '<button id="' + id + '_borderWidthBtn"></button>' });
@@ -3328,6 +3342,12 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
+                    var okBtn = document.getElementById(parent.element.id + '_ok');
+                    var drawingObject = { shape: '' };
+                    parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: drawingObject } });
+                    if (drawingObject['shape'] === 'path' && okBtn) {
+                        okBtn.classList.add('e-overlay');
+                    }
                 }
                 if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'path') {
                     args.toolbarItems = ['strokeColor', 'strokeWidth', 'z-order', 'duplicate', 'remove'];
@@ -3359,7 +3379,7 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'fillColor', 'strokeColor', 'strokeWidth', 'bold', 'italic', 'z-order', 'duplicate', 'remove', 'text'];
+                args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'fillColor', 'strokeColor', 'strokeWidth', 'bold', 'italic', 'underline', 'strikethrough', 'z-order', 'duplicate', 'remove', 'text'];
                 this.initTextToolbarItem(args.toolbarItems);
                 break;
             case 'pen':
@@ -3495,8 +3515,13 @@ var ToolbarModule = /** @class */ (function () {
         parent.notify('transform', { prop: 'getPanMove', onPropertyChange: false,
             value: { obj: panMoveObj } });
         if (panMoveObj['panMove']) {
+            var currentPannedPoint = extend({}, parent.panPoint.currentPannedPoint, {}, true);
+            parent.panPoint.currentPannedPoint = { x: parent.panPoint.totalPannedClientPoint.x, y: parent.panPoint.totalPannedClientPoint.y };
+            parent.panPoint.totalPannedClientPoint = { x: 0, y: 0 };
+            parent.panPoint.totalPannedInternalPoint = { x: 0, y: 0 };
             parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
-                value: { xDiff: null, yDiff: null } });
+                value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y } });
+            parent.panPoint.currentPannedPoint = currentPannedPoint;
         }
     };
     ToolbarModule.prototype.updateKBDNavigation = function (type) {
@@ -5482,60 +5507,10 @@ var ToolbarModule = /** @class */ (function () {
                     }
                     break;
                 case 'bold':
-                    parent.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
-                    if (parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'italic' } });
-                    }
-                    else if (parent.activeObj.textSettings.bold && !parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'default' } });
-                    }
-                    else if (!parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'bolditalic' } });
-                    }
-                    else if (!parent.activeObj.textSettings.bold && !parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'bold' } });
-                    }
-                    if (parent.element.querySelector('#' + id + '_bold').classList.contains('e-selected-btn')) {
-                        parent.element.querySelector('#' + id + '_bold').classList.remove('e-selected-btn');
-                    }
-                    else {
-                        parent.element.querySelector('#' + id + '_bold').classList.add('e-selected-btn');
-                    }
-                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
-                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
-                    }
-                    break;
                 case 'italic':
-                    parent.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
-                    if (parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'bold' } });
-                    }
-                    else if (parent.activeObj.textSettings.bold && !parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'bolditalic' } });
-                    }
-                    else if (!parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'default' } });
-                    }
-                    else if (!parent.activeObj.textSettings.bold && !parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'italic' } });
-                    }
-                    if (parent.element.querySelector('#' + id + '_italic').classList.contains('e-selected-btn')) {
-                        parent.element.querySelector('#' + id + '_italic').classList.remove('e-selected-btn');
-                    }
-                    else {
-                        parent.element.querySelector('#' + id + '_italic').classList.add('e-selected-btn');
-                    }
-                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
-                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
-                    }
+                case 'underline':
+                case 'strikethrough':
+                    this.toggleStyle(id, type);
                     break;
                 case 'croptransform':
                     this.performCropTransformClick();
@@ -5716,6 +5691,43 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
     };
+    ToolbarModule.prototype.getFontStyle = function (settings) {
+        var parts = [];
+        if (settings.bold) {
+            parts.push('bold');
+        }
+        if (settings.italic) {
+            parts.push('italic');
+        }
+        if (settings.underline) {
+            parts.push('underline');
+        }
+        if (settings.strikethrough) {
+            parts.push('strikethrough');
+        }
+        return parts.length === 0 ? 'default' : parts.join('');
+    };
+    ToolbarModule.prototype.toggleStyle = function (id, style) {
+        var parent = this.parent;
+        parent.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        var settings = parent.activeObj.textSettings;
+        settings[style] = !settings[style];
+        var fontStyle = this.getFontStyle(settings);
+        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false, value: { item: fontStyle } });
+        var button = parent.element.querySelector("#" + id + "_" + style);
+        if (button) {
+            if (button.classList.contains('e-selected-btn')) {
+                button.classList.remove('e-selected-btn');
+            }
+            else {
+                button.classList.add('e-selected-btn');
+            }
+        }
+        if (parent.activeObj.activePoint.width !== 0 ||
+            parent.activeObj.activePoint.height !== 0) {
+            parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+        }
+    };
     ToolbarModule.prototype.updateRedactType = function (value) {
         var parent = this.parent;
         parent.activeObj.redactType = value;
@@ -5734,7 +5746,7 @@ var ToolbarModule = /** @class */ (function () {
         if (parent.currObjType.isFiltered || parent.currObjType.isRedact) {
             parent.okBtn();
         }
-        if (frame && !frame.classList.contains('e-overlay')) {
+        if (!frame || !frame.classList.contains('e-overlay')) {
             zoom = parent.transform.zoomFactor;
             parent.frameDestPoints = extend({}, parent.img, {}, true);
             if (isNullOrUndefined(parent.cxtTbarHeight)) {
@@ -5743,7 +5755,10 @@ var ToolbarModule = /** @class */ (function () {
                 this.callFrameToolbar();
                 parent.frameObj.type = 'mat';
                 this.callFrameToolbar();
-                parent.cxtTbarHeight = parent.element.querySelector('#' + id + '_customizeWrapper').scrollHeight;
+                var elem = parent.element.querySelector('#' + id + '_customizeWrapper');
+                if (elem) {
+                    parent.cxtTbarHeight = elem.scrollHeight;
+                }
                 parent.frameObj = frameObj;
                 parent.tempFrameObj = tempFrameObj;
             }
@@ -6309,6 +6324,8 @@ var ToolbarModule = /** @class */ (function () {
             var fontSizeElem = parent.element.querySelector('.e-text-font-size');
             var boldBtn = parent.element.querySelector('#' + id + '_bold');
             var italicBtn = parent.element.querySelector('#' + id + '_italic');
+            var underlineBtn = parent.element.querySelector('#' + id + '_underline');
+            var strikethroughBtn = parent.element.querySelector('#' + id + '_strikethrough');
             if (parent.activeObj.strokeSettings && parent.activeObj.textSettings) {
                 if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
                     parent.activeObj.strokeSettings.strokeWidth = 2;
@@ -6421,6 +6438,22 @@ var ToolbarModule = /** @class */ (function () {
                         italicBtn.classList.remove('e-selected-btn');
                     }
                 }
+                if (underlineBtn) {
+                    if (parent.activeObj.textSettings.underline) {
+                        underlineBtn.classList.add('e-selected-btn');
+                    }
+                    else {
+                        underlineBtn.classList.remove('e-selected-btn');
+                    }
+                }
+                if (strikethroughBtn) {
+                    if (parent.activeObj.textSettings.strikethrough) {
+                        strikethroughBtn.classList.add('e-selected-btn');
+                    }
+                    else {
+                        strikethroughBtn.classList.remove('e-selected-btn');
+                    }
+                }
                 if (strokeWidthElem) {
                     var width = parent.activeObj.shape === 'text' ? parent.activeObj.strokeSettings.outlineWidth : parent.activeObj.strokeSettings.strokeWidth;
                     var strokeWidth = Math.round(width).toString();
@@ -6436,25 +6469,23 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.getStrokeWidth = function (text) {
         var strokeWidth;
         var currentWidth = parseInt(text, 10) / 2;
-        switch (currentWidth) {
-            case 0:
-                strokeWidth = this.l10n.getConstant('NoOutline');
-                break;
-            case 1:
-                strokeWidth = this.l10n.getConstant('XSmall');
-                break;
-            case 2:
-                strokeWidth = this.l10n.getConstant('Small');
-                break;
-            case 3:
-                strokeWidth = this.l10n.getConstant('Medium');
-                break;
-            case 4:
-                strokeWidth = this.l10n.getConstant('Large');
-                break;
-            case 5:
-                strokeWidth = this.l10n.getConstant('XLarge');
-                break;
+        if (currentWidth === 0) {
+            strokeWidth = this.l10n.getConstant('NoOutline');
+        }
+        else if (currentWidth > 0 && currentWidth <= 1) {
+            strokeWidth = this.l10n.getConstant('XSmall');
+        }
+        else if (currentWidth > 1 && currentWidth <= 2) {
+            strokeWidth = this.l10n.getConstant('Small');
+        }
+        else if (currentWidth > 2 && currentWidth <= 3) {
+            strokeWidth = this.l10n.getConstant('Medium');
+        }
+        else if (currentWidth > 3 && currentWidth <= 4) {
+            strokeWidth = this.l10n.getConstant('Large');
+        }
+        else {
+            strokeWidth = this.l10n.getConstant('XLarge');
         }
         return strokeWidth;
     };

package/styles/bds-lite.css

@@ -801,6 +801,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-border-secondary);
 }

package/styles/bds.css

@@ -801,6 +801,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-border-secondary);
 }
@@ -981,4 +985,8 @@
 .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
   width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
   width: calc(65% - 13px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-device.e-image-editor .e-ie-img-save-dlg {
+  width: 106px;
 }

package/styles/bootstrap-dark-lite.css

@@ -688,6 +688,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #959595;
 }

package/styles/bootstrap-dark.css

@@ -688,6 +688,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #959595;
 }

package/styles/bootstrap-lite.css

@@ -689,6 +689,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e6e6e6;
 }

package/styles/bootstrap.css

@@ -689,6 +689,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e6e6e6;
 }

package/styles/bootstrap4-lite.css

@@ -687,6 +687,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e9ecef;
 }

package/styles/bootstrap4.css

@@ -687,6 +687,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e9ecef;
 }

package/styles/bootstrap5-dark-lite.css

@@ -694,6 +694,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: rgb(68.0034482759, 75.85, 83.6965517241);
 }

package/styles/bootstrap5-dark.css

@@ -694,6 +694,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: rgb(68.0034482759, 75.85, 83.6965517241);
 }

package/styles/bootstrap5-lite.css

@@ -694,6 +694,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #dee2e6;
 }

package/styles/bootstrap5.3-lite.css

@@ -698,6 +698,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-border-light);
 }

package/styles/bootstrap5.3.css

@@ -698,6 +698,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-border-light);
 }

package/styles/bootstrap5.css

@@ -694,6 +694,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #dee2e6;
 }

package/styles/fabric-dark-lite.css

@@ -690,6 +690,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1f;
 }

package/styles/fabric-dark.css

@@ -690,6 +690,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1f;
 }
@@ -869,4 +873,19 @@
 }
 .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
   width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-device.e-image-editor .e-ie-img-save-dlg {
+  width: 120px;
+}
+.e-bigger .e-device.e-image-editor .e-ie-img-save-name {
+  width: calc(64% - 27px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-device.e-image-editor .e-blr-ie-save-dialog .e-ie-img-save-dlg {
+  width: 115px;
+}
+
+.e-blr-ie-save-dialog.e-device .e-ie-img-save-name {
+  width: calc(64% - 35px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fabric-lite.css

@@ -692,6 +692,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #fff;
 }

package/styles/fabric.css

@@ -692,6 +692,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #fff;
 }
@@ -872,4 +876,19 @@
 .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
   width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
   width: calc(64% - 13px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-device.e-image-editor .e-ie-img-save-dlg {
+  width: 120px;
+}
+.e-bigger .e-device.e-image-editor .e-ie-img-save-name {
+  width: calc(64% - 27px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-device.e-image-editor .e-blr-ie-save-dialog .e-ie-img-save-dlg {
+  width: 115px;
+}
+
+.e-blr-ie-save-dialog.e-device .e-ie-img-save-name {
+  width: calc(64% - 35px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fluent-dark-lite.css

@@ -697,6 +697,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1e;
 }

package/styles/fluent-dark.css

@@ -697,6 +697,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1e;
 }
@@ -847,6 +851,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
+.e-bigger .e-image-editor .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn, .e-bigger .e-image-editor .e-blr-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn,
+.e-image-editor.e-bigger .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn,
+.e-image-editor.e-bigger .e-blr-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn {
+  padding: 7px 14px;
+}
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -878,4 +887,8 @@
 .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
   width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
   width: calc(68% - 30px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-device.e-image-editor .e-ie-img-save-dlg {
+  width: 107px;
 }

package/styles/fluent-lite.css

@@ -697,6 +697,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #faf9f8;
 }

package/styles/fluent.css

@@ -697,6 +697,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #faf9f8;
 }
@@ -847,6 +851,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
+.e-bigger .e-image-editor .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn, .e-bigger .e-image-editor .e-blr-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn,
+.e-image-editor.e-bigger .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn,
+.e-image-editor.e-bigger .e-blr-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn {
+  padding: 7px 14px;
+}
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -878,4 +887,8 @@
 .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
   width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
   width: calc(68% - 30px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-device.e-image-editor .e-ie-img-save-dlg {
+  width: 107px;
 }

package/styles/fluent2-lite.css

@@ -316,6 +316,10 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   font-size: 16px;
 }
+.e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-icon-btn {
+  padding-top: 7.5px;
+  padding-bottom: 7.5px;
+}
 .e-image-editor .e-toolbar .e-toolbar-items .e-upload {
   border: none;
 }
@@ -720,6 +724,10 @@
   opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-content-bg-color-alt1);
 }