@syncfusion/ej2-image-editor 26.1.35 → 26.1.40

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.35
+*  version : 26.1.40
 *  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@25.1.35",
+  "_id": "@syncfusion/ej2-image-editor@26.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-X1v3NgYeuQnhDeYcNtmjd5Z8i6iyt0+Y8lfDHCkI2a+QFHpKfXgGwX3/ADNpsW9azAqi9snBSQqIdLXpF9lgkg==",
+  "_integrity": "sha512-LBGZGIcFpc8FnUEl2kJHr+/ye2QZphVy7q9pekYj+wdy87Fu+zf9TIV1ltUxxojuRxYZHJRrPYAvZ8DtL40NNg==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-25.1.35.tgz",
-  "_shasum": "55bac2f91b4ef49fbc257a9e99588a724eb185dc",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-26.1.38.tgz",
+  "_shasum": "30a86889517ad9fffa74727f93f6f5c2d6c00ac8",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.35",
-    "@syncfusion/ej2-buttons": "~26.1.35",
-    "@syncfusion/ej2-dropdowns": "~26.1.35",
-    "@syncfusion/ej2-inputs": "~26.1.35",
-    "@syncfusion/ej2-navigations": "~26.1.35",
-    "@syncfusion/ej2-popups": "~26.1.35",
+    "@syncfusion/ej2-base": "~26.1.37",
+    "@syncfusion/ej2-buttons": "~26.1.40",
+    "@syncfusion/ej2-dropdowns": "~26.1.40",
+    "@syncfusion/ej2-inputs": "~26.1.40",
+    "@syncfusion/ej2-navigations": "~26.1.40",
+    "@syncfusion/ej2-popups": "~26.1.38",
     "@syncfusion/ej2-splitbuttons": "~26.1.35"
   },
   "deprecated": false,
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "26.1.35",
+  "version": "26.1.40",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -3874,7 +3874,10 @@ var Draw = /** @class */ (function () {
         }
     };
     Draw.prototype.open = function (data) {
-        document.getElementById(this.parent.element.id + '_dropArea').style.display = 'none';
+        var dropArea = document.getElementById(this.parent.element.id + '_dropArea');
+        if (dropArea) {
+            dropArea.style.display = 'none';
+        }
         if (!this.parent.disabled) {
             this.openURL = data;
             this.restoreOldImage();
@@ -3895,7 +3898,10 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.fileSelect = function (inputElement, args) {
         var parent = this.parent;
-        document.getElementById(parent.element.id + '_dropArea').style.display = 'none';
+        var dropArea = document.getElementById(parent.element.id + '_dropArea');
+        if (dropArea) {
+            dropArea.style.display = 'none';
+        }
         if (!parent.disabled) {
             var filesData = void 0;
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

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

@@ -1244,7 +1244,7 @@ var Selection = /** @class */ (function () {
         }
         else {
             parent.trigger('shapeChanging', shapeMovingArgs);
-            this.isPreventShaping = shapeResizingArgs.cancel;
+            this.isPreventShaping = shapeMovingArgs.cancel;
             parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                 value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
         }

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

@@ -561,6 +561,14 @@ var Shape = /** @class */ (function () {
                 parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                 parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
             }
+            if (text && text.indexOf('\n') > -1 && parent.isPublicMethod) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var fontSizeInd = String(parent.fontSizeColl.findIndex(function (item) { return item.text === String(parent.activeObj.textSettings.fontSize); }) + 1);
+                parent.noPushUndo = true;
+                parent.updateFontSize('5');
+                parent.updateFontSize(fontSizeInd);
+                parent.noPushUndo = false;
+            }
             if (parent.isPublicMethod && !isSelected) {
                 parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
             }
@@ -2654,7 +2662,9 @@ var Shape = /** @class */ (function () {
     Shape.prototype.pushActItemIntoObj = function () {
         var parent = this.parent;
         if (parent.textArea.style.display === 'none') {
-            parent.objColl.push(parent.activeObj);
+            if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                parent.objColl.push(parent.activeObj);
+            }
         }
         else {
             var temp = extend({}, parent.activeObj, {}, true);

package/src/image-editor/action/undo-redo.js

@@ -327,6 +327,7 @@ var UndoRedo = /** @class */ (function () {
                     case 'freehanddraw':
                     case 'freehand-draw':
                         this.updateFreehandDraw(obj.previousPointColl, obj.previousSelPointColl);
+                        parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex', value: { value: parent.pointColl.length } });
                         break;
                     case 'freehanddrawCustomized':
                         this.updateFreehandDrawCustomized(obj.previousObjColl, obj.previousPointColl);
@@ -457,6 +458,7 @@ var UndoRedo = /** @class */ (function () {
                     case 'freehanddraw':
                     case 'freehand-draw':
                         this.updateFreehandDraw(obj.currentPointColl, obj.currentSelPointColl);
+                        parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex', value: { value: parent.pointColl.length } });
                         break;
                     case 'freehanddrawCustomized':
                         this.updateFreehandDrawCustomized(obj.currentObjColl, obj.currentPointColl);

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

@@ -937,7 +937,10 @@ var ImageEditor = /** @class */ (function (_super) {
         if (isNullOrUndefined(data)) {
             return;
         }
-        document.getElementById(this.element.id + '_dropArea').style.display = 'none';
+        var dropArea = document.getElementById(this.element.id + '_dropArea');
+        if (dropArea) {
+            dropArea.style.display = 'none';
+        }
         this.notify('draw', { prop: 'open', value: { data: data } });
     };
     /**
@@ -1967,7 +1970,10 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
         this.notify('toolbar', { prop: 'create-toolbar', onPropertyChange: false });
         this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
-        document.getElementById(this.element.id + '_dropArea').style.display = 'block';
+        var dropArea = document.getElementById(this.element.id + '_dropArea');
+        if (dropArea) {
+            dropArea.style.display = 'block';
+        }
     };
     // Toolbar related codes
     ImageEditor.prototype.applyShapes = function () {

package/styles/bootstrap-dark.css

@@ -799,4 +799,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #959595 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #f0f0f0;
 }

package/styles/bootstrap.css

@@ -801,4 +801,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #e6e6e6 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #333;
 }

package/styles/bootstrap4.css

@@ -796,4 +796,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: #495057 !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #000;
 }

package/styles/bootstrap5-dark.css

@@ -813,4 +813,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 2px solid #adb5bd;
 }

package/styles/bootstrap5.css

@@ -813,4 +813,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 2px solid #6c757d;
 }

package/styles/fabric-dark.css

@@ -801,4 +801,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #4a4848 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #fff;
 }

package/styles/fabric.css

@@ -804,4 +804,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #dadada !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #000;
 }

package/styles/fluent-dark.css

@@ -814,4 +814,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #323130 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #fff;
 }

package/styles/fluent.css

@@ -814,4 +814,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #e1dfdd !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #323130;
 }

package/styles/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;
@@ -1697,6 +1697,7 @@
   text-transform: capitalize;
   margin-left: calc(100% - 194px);
   margin-top: 4px;
+  margin-left: calc(100% - 188px);
 }
 
 .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -1848,4 +1849,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: var(--color-sf-content-bg-color-selected) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid var(--color-sf-secondary-text-color);
 }

package/styles/highcontrast-light.css

@@ -797,4 +797,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #000 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #000;
 }

package/styles/highcontrast.css

@@ -802,4 +802,11 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-nocolor-item {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") !important; /* stylelint-disable-line declaration-no-important */
   background-size: 8px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #fff;
 }

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 0 10px !default;
 $image-editor-save-dlg-grp-btn-padding: 0 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 0 15px !default;
 $image-editor-icon-button: 3px !default;
+$image-editor-filter-canvas-focus: 1px solid $gray-25 !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-grp-btn-padding: 0 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 0 12px !default;
 $image-editor-button-label: 14.2px !default;
 $image-editor-icon-button: 3px !default;
+$image-editor-filter-canvas-focus: 1px solid $grey-dark-font !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 0 10px !default;
 $image-editor-save-dlg-grp-btn-padding: 0 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 0 12px !default;
 $image-editor-icon-button: 2px !default;
+$image-editor-filter-canvas-focus: 1px solid $grey-light-font !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 4px 9px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 4px 12px !default;
 $image-editor-icon-button: 2px !default;
+$image-editor-filter-canvas-focus: 1px solid $black !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-grp-btn-padding: 4px 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 6px 13px !default;
 $image-editor-button-label: 15px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 2px solid $icon-color !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 4px 15px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 6px 13px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 2px solid $icon-color !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 2px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 2px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 2px 8px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 1px solid $neutral-light-fontalt !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 2px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 2px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 2px 8px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 1px solid $neutral-light-fontalt !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 4px 15px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 11px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 7px 10px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 8px !default;
 $image-editor-save-dlg-grp-btn-padding: 5.2px 10.5px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 5.2px 10.5px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;

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

@@ -22,3 +22,4 @@ $image-editor-save-dlg-big-btn-pad: 8px !default;
 $image-editor-save-dlg-grp-btn-padding: 0 !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 4px 13px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 2px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 2px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 3px 9px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $content-font !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 2px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 2px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 3px 9px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $content-font !default;

package/styles/image-editor/_layout.scss

@@ -483,6 +483,14 @@
         }
       }
     }
+    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
+    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material3' {
+        height: 16px !important; /* stylelint-disable-line declaration-no-important */
+        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+        width: 16px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
   
   .e-ie-img-save-dlg .e-btn {
@@ -688,12 +696,18 @@
     @if $skin-name == 'highcontrast' {
       margin-left: calc(100% - 175px);
     }
-    @if $skin-name == 'FluentUI' or $skin-name == 'material' or $skin-name == 'Material3' {
+    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
       margin-left: calc(100% - 185px);
     }
     @if $skin-name == 'fabric' {
       margin-left: calc(100% - 180px);
     }
+    @if $skin-name == 'fluent2' {
+      margin-left: calc(100% - 188px);
+    }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 190px);
+    }
   }
 
   .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -716,6 +730,9 @@
     @if $skin-name == 'bootstrap5' {
       margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
     }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -813,7 +830,12 @@
 
     & .e-ie-img-size-value-span {
       vertical-align: middle;
-      margin-left: calc(50% - 55px);
+      @if $skin-name == 'Material3' {
+        margin-left: calc(50% - 52px);
+      }
+      @else {
+        margin-left: calc(50% - 55px);
+      }
     }
 
     & .e-btn-group .e-btn {
@@ -844,10 +866,10 @@
       }
  
       & .e-ie-img-size-value-span {
-        @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
           margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
-        @else if $skin-name == 'bootstrap' {
+        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
           margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
         @else if $skin-name == 'tailwind' {
@@ -870,6 +892,12 @@
     }
   }
 
+  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
     width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 4px 11px 2px !default;
 $image-editor-save-dlg-grp-btn-padding: 6px 7.5px 4px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 2px 9.5px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $grey-white !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 4px 11px 2px !default;
 $image-editor-save-dlg-grp-btn-padding: 6px 7.5px 4px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 2px 9.5px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $grey-light-font !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 8px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 8px 10.5px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 11px 12px !default;
 $image-editor-icon-button: 3px !default;
+$image-editor-filter-canvas-focus: 1px solid $icon-color !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 4px 15px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 4px 9px !default;
 $image-editor-icon-button: 2.9px !default;
+$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;

package/styles/image-editor/_theme.scss

@@ -111,3 +111,10 @@
     }
   }
 }
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: $image-editor-filter-canvas-focus;
+}

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

@@ -799,4 +799,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #959595 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #f0f0f0;
 }

package/styles/image-editor/bootstrap.css

@@ -801,4 +801,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #e6e6e6 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #333;
 }

package/styles/image-editor/bootstrap4.css

@@ -796,4 +796,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: #495057 !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #000;
 }

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

@@ -813,4 +813,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 2px solid #adb5bd;
 }

package/styles/image-editor/bootstrap5.css

@@ -813,4 +813,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 2px solid #6c757d;
 }