@syncfusion/ej2-image-editor 28.2.3 → 29.1.33

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

@@ -364,6 +364,48 @@ var ToolbarModule = /** @class */ (function () {
             case 'heightAspectRatio':
                 this.heightAspectRatio(args.value['e']);
                 break;
+            case 'cancelPan':
+                this.cancelPan();
+                break;
+            case 'zoomInBtnMouseDownHandler':
+                this.zoomInBtnMouseDownHandler(args.value['event']);
+                break;
+            case 'zoomOutBtnMouseDownHandler':
+                this.zoomOutBtnMouseDownHandler(args.value['event']);
+                break;
+            case 'drawDashedLine':
+                this.drawDashedLine(args.value['context']);
+                break;
+            case 'saveDialogClosed':
+                this.saveDialogClosed(args.value['id']);
+                break;
+            case 'getIndex':
+                this.getIndex(args.value['item']);
+                break;
+            case 'getRectRadius':
+                this.getRectRadius(args.value['text']);
+                break;
+            case 'applyPreviewFilter':
+                this.applyPreviewFilter();
+                break;
+            case 'renderSlider':
+                this.renderSlider(args.value['type'], args.value['isSelect']);
+                break;
+            case 'zoomInBtnClickHandler':
+                this.zoomInBtnClickHandler(args.value['e']);
+                break;
+            case 'zoomOutBtnClickHandler':
+                this.zoomOutBtnClickHandler(args.value['e']);
+                break;
+            case 'getAdjustmentToolbarItem':
+                this.getAdjustmentToolbarItem();
+                break;
+            case 'getFilterToolbarItem':
+                this.getFilterToolbarItem();
+                break;
+            case 'renderCropBtn':
+                this.renderCropBtn();
+                break;
         }
     };
     ToolbarModule.prototype.updatePrivateVariables = function () {
@@ -492,9 +534,9 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var id = parent.element.id;
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
-            parent.element.appendChild(parent.createElement('div', { id: id + '_contextualToolbarArea',
-                className: 'e-contextual-toolbar-wrapper e-hide', attrs: { style: 'position: absolute;' }
-            }));
+            var contextualToolbarArea = parent.createElement('div', { id: id + '_contextualToolbarArea', className: 'e-contextual-toolbar-wrapper e-hide' });
+            contextualToolbarArea.style.position = 'absolute';
+            parent.element.appendChild(contextualToolbarArea);
             var toolbarArea = document.getElementById(id + '_contextualToolbarArea');
             var toolbar_2 = parent.createElement('div', { id: id + '_contextualToolbar' });
             toolbarArea.appendChild(toolbar_2);
@@ -1373,8 +1415,9 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.enableDisableCloneBtn = function (toolbarId, obj) {
         var parent = this.parent;
         var isDummyTextClick = false;
+        var width = Math.floor(parent.activeObj.activePoint.width);
         if (parent.activeObj.shape && parent.activeObj.shape === 'text' &&
-            parent.activeObj.textSettings.fontSize === 11 && Math.floor(parent.activeObj.activePoint.width) === 55 &&
+            parent.activeObj.textSettings.fontSize === 11 && (width === 55 || (parent.activeObj.textSettings.bold && width === 58)) &&
             Math.floor(parent.activeObj.activePoint.height) === 11) {
             isDummyTextClick = true;
         }
@@ -1564,8 +1607,9 @@ var ToolbarModule = /** @class */ (function () {
         var quality = ['Good', 'Great', 'Highest'];
         parent.element.appendChild(parent.createElement('div', { id: id + '_saveDialog' }));
         var dialogContent = parent.createElement('div', {
-            id: id + '_dialogContent', attrs: { style: 'display: flex;' }
+            id: id + '_dialogContent'
         });
+        dialogContent.style.display = 'flex';
         var dialogImgContent = dialogContent.appendChild(parent.createElement('div', {
             id: id + '_dialogImgContent', className: 'e-ie-dlg-img-content'
         }));
@@ -2004,7 +2048,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         if ((isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Straightening') > -1)) && !Browser.isDevice) {
             toolbarItems.push({ align: 'Center', type: 'Separator' });
-            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Straighten') > -1 || parent.toolbar.indexOf('Straighten') > -1))) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Straightening') > -1)) {
                 var spanWidth = document.createElement('span');
                 spanWidth.innerHTML = this.l10n.getConstant('Straighten');
                 toolbarItems.push({ id: id + '_straightenSpan', cssClass: 'e-ie-straighten-span', template: spanWidth, align: 'Center' });
@@ -3236,7 +3280,9 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 break;
             case 'shapes':
-                parent.noPushUndo = true;
+                if (!parent.isPublicMethod) {
+                    parent.noPushUndo = true;
+                }
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
@@ -3570,37 +3616,37 @@ var ToolbarModule = /** @class */ (function () {
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
             toolbarItems.push({ id: id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Default'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_defaultCanvas' + ' tabindex=0></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_defaultCanvas' + ' tabindex=0></canvas><div><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
             toolbarItems.push({ id: id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Chrome'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_chromeCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
             toolbarItems.push({ id: id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Cold'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_coldCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
             toolbarItems.push({ id: id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Warm'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_warmCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
             toolbarItems.push({ id: id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Grayscale'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_grayscaleCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
             toolbarItems.push({ id: id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Sepia'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_sepiaCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
             toolbarItems.push({ id: id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Invert'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_invertCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
         }
         var tempToolbarItems = this.processToolbar('center');
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -5202,6 +5248,7 @@ var ToolbarModule = /** @class */ (function () {
         var splitWords;
         var actionType;
         var actionArgs;
+        var isRedactClick = false;
         if (parent.activeObj.shape !== undefined) {
             splitWords = parent.activeObj.shape.split('-');
         }
@@ -5505,7 +5552,7 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: parent.tempFrameObj, obj: { frameChangeEventArgs: null } } });
                     break;
                 case 'redact':
-                    parent.currObjType.isRedact = true;
+                    parent.currObjType.isRedact = isRedactClick = true;
                     parent.drawingShape = 'redact';
                     if (isNullOrUndefined(parent.activeObj.redactBlur)) {
                         parent.activeObj.redactBlur = 20;
@@ -5518,7 +5565,7 @@ var ToolbarModule = /** @class */ (function () {
                     this.redactSlider(parent.activeObj.redactType);
                     break;
                 case 'pixelate':
-                    parent.currObjType.isRedact = true;
+                    parent.currObjType.isRedact = isRedactClick = true;
                     parent.drawingShape = 'redact';
                     parent.notify('selection', { prop: 'annotate', value: { shape: 'redact' } });
                     if (parent.activeObj.redactType === 'blur') {
@@ -5552,7 +5599,7 @@ var ToolbarModule = /** @class */ (function () {
                     }
                     break;
                 case 'redactblur':
-                    parent.currObjType.isRedact = true;
+                    parent.currObjType.isRedact = isRedactClick = true;
                     parent.drawingShape = 'redact';
                     parent.notify('selection', { prop: 'annotate', value: { shape: 'redact' } });
                     parent.notify('shape', { prop: 'setRedactType', onPropertyChange: false,
@@ -5587,6 +5634,10 @@ var ToolbarModule = /** @class */ (function () {
                     }
                     break;
             }
+            if (isRedactClick) {
+                parent.notify('draw', { prop: 'updateTempObjColl' });
+                parent.notify('draw', { prop: 'updateTempPointColl' });
+            }
         }
     };
     ToolbarModule.prototype.updateRedactType = function (value) {

package/styles/bds-lite.css

@@ -507,6 +507,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -790,6 +797,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-border-secondary);
 }

package/styles/bds.css

@@ -507,6 +507,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -790,6 +797,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-border-secondary);
 }

package/styles/bootstrap-dark-lite.css

@@ -398,6 +398,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -677,6 +684,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #959595;
 }

package/styles/bootstrap-dark.css

@@ -398,6 +398,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -677,6 +684,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #959595;
 }

package/styles/bootstrap-lite.css

@@ -398,6 +398,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -678,6 +685,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e6e6e6;
 }

package/styles/bootstrap.css

@@ -398,6 +398,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -678,6 +685,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e6e6e6;
 }

package/styles/bootstrap4-lite.css

@@ -397,6 +397,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -676,6 +683,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e9ecef;
 }
@@ -683,10 +694,10 @@
   background: #f8f9fa;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper canvas {
-  border-color: #545b62 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper:focus canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper:focus canvas {
-  border-color: #545b62 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
   background: #495057 !important; /* stylelint-disable-line declaration-no-important */
@@ -708,15 +719,15 @@
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background: #5b636a;
+  background: rgb(91.452360515, 99.0733905579, 105.847639485);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
-  -webkit-box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important;
-          box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: 0 0 0 0.25em rgba(115.3599785408, 122.5070600858, 128.8600214592, 0.5) !important;
+          box-shadow: 0 0 0 0.25em rgba(115.3599785408, 122.5070600858, 128.8600214592, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background: #545b62;
+  background: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;

package/styles/bootstrap4.css

@@ -397,6 +397,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -676,6 +683,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e9ecef;
 }
@@ -683,10 +694,10 @@
   background: #f8f9fa;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper canvas {
-  border-color: #545b62 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper:focus canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper:focus canvas {
-  border-color: #545b62 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
   background: #495057 !important; /* stylelint-disable-line declaration-no-important */
@@ -708,15 +719,15 @@
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background: #5b636a;
+  background: rgb(91.452360515, 99.0733905579, 105.847639485);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
-  -webkit-box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important;
-          box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: 0 0 0 0.25em rgba(115.3599785408, 122.5070600858, 128.8600214592, 0.5) !important;
+          box-shadow: 0 0 0 0.25em rgba(115.3599785408, 122.5070600858, 128.8600214592, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background: #545b62;
+  background: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;

package/styles/bootstrap5-dark-lite.css

@@ -403,6 +403,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -683,20 +690,24 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
-  background: #444c54;
+  background: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper canvas {
-  border-color: #565e64 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(86.4, 93.6, 100) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper:focus canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper:focus canvas {
-  border-color: #565e64 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(86.4, 93.6, 100) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
-  background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
+  background: rgb(91.8, 99.45, 106.25) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn .e-icons {
   color: #fff;
@@ -705,28 +716,28 @@
   background: inherit;
   border: none;
   margin-top: -1px;
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   color: #adb5bd;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
-  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
-          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background: #565e64;
+  background: rgb(86.4, 93.6, 100);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
@@ -752,7 +763,7 @@
 }
 
 .e-dropdown-popup .e-selected-btn {
-  background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
+  background: rgb(91.8, 99.45, 106.25) !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-filter-canvas:focus,

package/styles/bootstrap5-dark.css

@@ -403,6 +403,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -683,20 +690,24 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
-  background: #444c54;
+  background: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper canvas {
-  border-color: #565e64 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(86.4, 93.6, 100) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper:focus canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper:focus canvas {
-  border-color: #565e64 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(86.4, 93.6, 100) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
-  background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
+  background: rgb(91.8, 99.45, 106.25) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn .e-icons {
   color: #fff;
@@ -705,28 +716,28 @@
   background: inherit;
   border: none;
   margin-top: -1px;
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   color: #adb5bd;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
-  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
-          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background: #565e64;
+  background: rgb(86.4, 93.6, 100);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
@@ -752,7 +763,7 @@
 }
 
 .e-dropdown-popup .e-selected-btn {
-  background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
+  background: rgb(91.8, 99.45, 106.25) !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-filter-canvas:focus,