@syncfusion/ej2-image-editor 24.1.44 → 24.1.45

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.1.44
+*  version : 24.1.45
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@24.1.43",
+  "_id": "@syncfusion/ej2-image-editor@24.1.44",
   "_inBundle": false,
-  "_integrity": "sha512-LcI3ecnXwuM7mkbjNvkCjubyWqxgHSir+LYa2n0zChRWpLAsz5Mud5bPbJo38vJ4YdaZLO4aOgnU1IPbSunDZA==",
+  "_integrity": "sha512-W2VCeuMZRU4WP2BwfpPHF6O6Z0Bff5uCM4U0jWrezd8DQPM4EhOv0EtmzH7eeBnxQNccdBhNXH9H0nB/Txf1Jw==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-24.1.43.tgz",
-  "_shasum": "3f51287e0339878931977e29514a28a0e013f637",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-24.1.44.tgz",
+  "_shasum": "657a8d93d69ff858081ecc60981be7987f93ec89",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -33,11 +33,11 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~24.1.42",
-    "@syncfusion/ej2-buttons": "~24.1.41",
-    "@syncfusion/ej2-inputs": "~24.1.41",
+    "@syncfusion/ej2-buttons": "~24.1.45",
+    "@syncfusion/ej2-inputs": "~24.1.45",
     "@syncfusion/ej2-navigations": "~24.1.41",
     "@syncfusion/ej2-popups": "~24.1.44",
-    "@syncfusion/ej2-splitbuttons": "~24.1.44"
+    "@syncfusion/ej2-splitbuttons": "~24.1.45"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "24.1.44",
+  "version": "24.1.45",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -2617,11 +2617,19 @@ var Draw = /** @class */ (function () {
             if (!isBlazor()) {
                 parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
+                if (parent.activeObj.shape && parent.activeObj.shape === 'image') {
+                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                }
             }
             else {
                 parent.updateToolbar(parent.element, 'imageLoaded');
+                if (parent.activeObj.shape && parent.activeObj.shape === 'image') {
+                    parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
+                }
             }
             parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         }
         else {
             if (isContextualToolbar && (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool']))) {
@@ -4030,9 +4038,9 @@ var Draw = /** @class */ (function () {
                         }
                     }
                 }
-                var panX = (parent.lowerCanvas.clientWidth / 2) - Math.floor(currObj.activePoint.startX +
+                var panX = (parent.lowerCanvas.clientWidth / 2) - (currObj.activePoint.startX +
                     (currObj.activePoint.width / 2));
-                var panY = (parent.lowerCanvas.clientHeight / 2) - Math.floor(currObj.activePoint.startY +
+                var panY = ((parent.lowerCanvas.clientHeight + 1) / 2) - (currObj.activePoint.startY +
                     (currObj.activePoint.height / 2));
                 if (isNullOrUndefined(parent.activeObj.shape)) {
                     parent.activeObj = extend({}, activeObj, {}, true);

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

@@ -2420,9 +2420,7 @@ var Transform = /** @class */ (function () {
             parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
         }
         parent.setStraighten(degree, true);
-        if ((isBlazor() && parent.events && parent.events.straightening.hasDelegate === false) || !isBlazor()) {
-            parent.okBtn();
-        }
+        parent.okBtn();
     };
     return Transform;
 }());

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

@@ -442,7 +442,7 @@ var ToolbarModule = /** @class */ (function () {
             this.createLeftToolbarControls();
             var mToolbar = document.getElementById(id + '_toolbar');
             if (toolbar_1) {
-                this.toolbarHeight = mToolbar.scrollHeight;
+                this.toolbarHeight = mToolbar.clientHeight;
             }
         }
         else {
@@ -745,10 +745,10 @@ var ToolbarModule = /** @class */ (function () {
         }
         if (!isBlazor()) {
             if (parent.toolbarTemplate) {
-                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').offsetHeight;
+                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
             }
             else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
-                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').offsetHeight;
+                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
             }
             parent.toolbarHeight = this.toolbarHeight;
         }
@@ -759,7 +759,7 @@ var ToolbarModule = /** @class */ (function () {
                 cHt = cusWrapper.offsetHeight + 2;
             }
             var ht = parent.element.querySelector('#' + id + '_canvasWrapper').offsetHeight;
-            contextualToolbarArea.style.top = this.toolbarHeight + ht - cHt + 'px';
+            contextualToolbarArea.style.top = this.toolbarHeight + 1 + ht - cHt + 'px';
             if (cType === 'straighten') {
                 parent.isStraightening = true;
                 var ctxToolbar = parent.element.querySelector('#' + id + '_contextualToolbarArea');
@@ -776,7 +776,7 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
         else {
-            contextualToolbarArea.style.top = this.toolbarHeight + 'px';
+            contextualToolbarArea.style.top = this.toolbarHeight + 1 + 'px';
         }
     };
     ToolbarModule.prototype.processToolbar = function (position) {
@@ -1600,8 +1600,8 @@ var ToolbarModule = /** @class */ (function () {
         }
         var slider = parent.element.querySelector('#' + id + '_straightenSlider');
         if ((isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Straightening') > -1))
-            && slider && slider.parentElement.scrollHeight > this.toolbarHeight) {
-            this.toolbarHeight = parent.toolbarHeight = slider.parentElement.scrollHeight;
+            && slider && slider.parentElement.clientHeight > this.toolbarHeight) {
+            this.toolbarHeight = parent.toolbarHeight = slider.parentElement.clientHeight;
         }
         this.enableDisableTbrBtn();
         parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
@@ -4497,20 +4497,23 @@ var ToolbarModule = /** @class */ (function () {
         if (type === 'transparency') {
             labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_labelWrapper',
-                styles: Browser.isDevice ? 'position: absolute; top: 25%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
-                    : 'position: absolute; top: 25%; left: calc(50% - 250px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                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;'
             }));
         }
         else {
             labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_labelWrapper',
-                styles: Browser.isDevice ? ('position: absolute; top: 25%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;')
+                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;'
             }));
         }
         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'
         }));
         var value = parent.getCurrAdjustmentValue(type);
@@ -4589,8 +4592,8 @@ 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',
-                styles: 'position: absolute; top: 25%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                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;'
             }));
             sLabelWrapper.innerHTML = parent.transform.straighten.toString() + '&#176';
             sliderWrapper.parentElement.classList.add('e-straighten-slider');
@@ -4603,6 +4606,9 @@ var ToolbarModule = /** @class */ (function () {
                     'position: absolute; top: 25%; left: calc(50% + 190px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
             }));
             sliderWrapper.parentElement.classList.add('e-finetune-slider');
+            if (type === 'transparency' && Browser.isDevice) {
+                sliderWrapper.parentElement.classList.add('e-ie-device-transparency-slider');
+            }
             this.updateFinetuneSpan(type);
         }
     };

package/styles/bootstrap-dark.css

@@ -523,7 +523,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 31% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 31% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -539,6 +555,10 @@
   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-image-editor {
   background: #959595;
 }

package/styles/bootstrap.css

@@ -523,7 +523,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 31% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 31% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -539,6 +555,10 @@
   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-image-editor {
   background: #e6e6e6;
 }

package/styles/bootstrap4.css

@@ -521,7 +521,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 31% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 31% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -537,6 +553,10 @@
   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-image-editor {
   background: #e9ecef;
 }

package/styles/bootstrap5-dark.css

@@ -539,7 +539,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -555,6 +571,10 @@
   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-image-editor {
   background: #444c54;
 }

package/styles/bootstrap5.css

@@ -539,7 +539,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -555,6 +571,10 @@
   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-image-editor {
   background: #dee2e6;
 }

package/styles/fabric-dark.css

@@ -523,7 +523,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -539,6 +555,10 @@
   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-image-editor {
   background: #201f1f;
 }

package/styles/fabric.css

@@ -523,7 +523,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -539,6 +555,10 @@
   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-image-editor {
   background: #fff;
 }

package/styles/fluent-dark.css

@@ -534,7 +534,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -550,6 +566,10 @@
   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-image-editor {
   background: #201f1e;
 }

package/styles/fluent.css

@@ -534,7 +534,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -550,6 +566,10 @@
   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-image-editor {
   background: #faf9f8;
 }

package/styles/highcontrast-light.css

@@ -521,7 +521,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -537,6 +553,10 @@
   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-image-editor {
   background: #fff;
 }

package/styles/highcontrast.css

@@ -525,7 +525,23 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-label {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -541,6 +557,10 @@
   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-image-editor {
   background: #000;
 }

package/styles/image-editor/_bootstrap-dark-definition.scss

@@ -17,3 +17,5 @@ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
 $image-editor-slider-handler: calc(50% - 5px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 7px) !default;
+$image-editor-finetune-value-span: 31% !default;
+$image-editor-finetune-span: 31% !default;

package/styles/image-editor/_bootstrap-definition.scss

@@ -17,3 +17,5 @@ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
 $image-editor-slider-handler: calc(50% - 5px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 7px) !default;
+$image-editor-finetune-value-span: 31% !default;
+$image-editor-finetune-span: 31% !default;

package/styles/image-editor/_bootstrap4-definition.scss

@@ -17,3 +17,5 @@ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
 $image-editor-slider-handler: calc(50% - 6px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 7px) !default;
+$image-editor-finetune-value-span: 31% !default;
+$image-editor-finetune-span: 31% !default;

package/styles/image-editor/_bootstrap5-definition.scss

@@ -17,3 +17,5 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
 $image-editor-slider-handler: calc(50% - 5px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 6px) !default;
 $image-editor-device-slider-handler: calc(50% - 8px) !default;
+$image-editor-finetune-value-span: 29% !default;
+$image-editor-finetune-span: 29% !default;

package/styles/image-editor/_fabric-dark-definition.scss

@@ -17,3 +17,5 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
 $image-editor-slider-handler: calc(50% - 8px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 9px) !default;
 $image-editor-device-slider-handler: calc(50% - 9px) !default;
+$image-editor-finetune-value-span: 29% !default;
+$image-editor-finetune-span: 29% !default;

package/styles/image-editor/_fabric-definition.scss

@@ -17,3 +17,5 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
 $image-editor-slider-handler: calc(50% - 8px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 9px) !default;
 $image-editor-device-slider-handler: calc(50% - 9px) !default;
+$image-editor-finetune-value-span: 29% !default;
+$image-editor-finetune-span: 29% !default;

package/styles/image-editor/_fluent-definition.scss

@@ -17,3 +17,5 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
 $image-editor-slider-handler: calc(50% - 8px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 8px) !default;
 $image-editor-device-slider-handler: calc(50% - 8px) !default;
+$image-editor-finetune-value-span: 29% !default;
+$image-editor-finetune-span: 29% !default;

package/styles/image-editor/_highcontrast-definition.scss

@@ -17,3 +17,5 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
 $image-editor-slider-handler: calc(50% - 6px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 8px) !default;
 $image-editor-device-slider-handler: calc(50% - 8px) !default;
+$image-editor-finetune-value-span: 29% !default;
+$image-editor-finetune-span: 29% !default;