@syncfusion/ej2-image-editor 23.1.41 → 23.2.4

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

@@ -766,19 +766,32 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
         var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-        var aspectRatioIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        var icon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
         var originalWidth = parent.img.destWidth;
         var originalHeight = parent.img.destHeight;
         var aspectRatioHeightValue = parseFloat(aspectRatioHeight.value);
         var width = Math.floor((aspectRatioHeightValue / (originalHeight / originalWidth)));
-        if (aspectRatioIcon) {
+        var widthNumeric = getComponent(aspectRatioWidth, 'numerictextbox');
+        if (icon) {
             if (width != null && !isNaN(width)) {
-                getComponent(aspectRatioWidth, 'numerictextbox').value = width;
-                aspectRatioWidth.value = width.toString() + ' px';
+                if (isNullOrUndefined(widthNumeric.value)) {
+                    widthNumeric.placeholder = width + ' px';
+                    aspectRatioWidth.placeholder = width.toString() + ' px';
+                }
+                else {
+                    widthNumeric.value = width;
+                    aspectRatioWidth.value = width.toString() + ' px';
+                }
             }
             else {
-                getComponent(aspectRatioWidth, 'numerictextbox').value = 0;
-                aspectRatioWidth.value = '0 px';
+                if (isNullOrUndefined(widthNumeric.value)) {
+                    widthNumeric.placeholder = '0 px';
+                    aspectRatioWidth.placeholder = '0 px';
+                }
+                else {
+                    widthNumeric.value = 0;
+                    aspectRatioWidth.value = '0 px';
+                }
             }
         }
     };
@@ -787,37 +800,53 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
         var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-        var aspectRatioIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        var icon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
         var originalWidth = parent.img.destWidth;
         var originalHeight = parent.img.destHeight;
         var aspectRatioWidthValue = parseFloat(aspectRatioWidth.value);
         var height = Math.floor((aspectRatioWidthValue / (originalWidth / originalHeight)));
-        if (aspectRatioIcon && !isNaN(height)) {
-            getComponent(aspectRatioHeight, 'numerictextbox').value = height;
-            aspectRatioHeight.value = height.toString() + ' px';
-        }
-        else {
-            getComponent(aspectRatioHeight, 'numerictextbox').value = 0;
-            aspectRatioHeight.value = '0 px';
+        var heightNumeric = getComponent(aspectRatioHeight, 'numerictextbox');
+        if (icon) {
+            if (!isNaN(height)) {
+                if (isNullOrUndefined(heightNumeric.value)) {
+                    heightNumeric.placeholder = height + ' px';
+                    aspectRatioHeight.placeholder = height.toString() + ' px';
+                }
+                else {
+                    heightNumeric.value = height;
+                    aspectRatioHeight.value = height.toString() + ' px';
+                }
+            }
+            else {
+                if (isNullOrUndefined(heightNumeric.value)) {
+                    heightNumeric.placeholder = '0 px';
+                    aspectRatioHeight.placeholder = '0 px';
+                }
+                else {
+                    heightNumeric.value = 0;
+                    aspectRatioHeight.value = '0 px';
+                }
+            }
         }
     };
     ToolbarModule.prototype.getResizeToolbarItem = function () {
         var toolbarItems = [];
+        var isResize = this.parent.aspectWidth && this.parent.aspectHeight ? true : false;
         var spanWidth = document.createElement('span');
         spanWidth.innerHTML = this.l10n.getConstant('W');
         toolbarItems.push({ id: this.parent.element.id + '_width', cssClass: 'e-ie-resize-width', template: spanWidth, align: 'Center' });
         toolbarItems.push({ id: this.parent.element.id + '_resizeWidth', prefixIcon: 'e-icons e-anti-clock-wise',
             tooltipText: this.l10n.getConstant('Width'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
-                showSpinButton: false, value: (this.parent.aspectWidth && this.parent.aspectHeight) ? this.parent.aspectWidth : Math.ceil(this.parent.img.destWidth),
-                format: '###.## px' })
+                showSpinButton: false, value: isResize ? this.parent.aspectWidth : null,
+                placeholder: isResize ? null : Math.ceil(this.parent.img.srcWidth).toString(), format: '###.## px' })
         });
         var spanHeight = document.createElement('span');
         spanHeight.innerHTML = this.l10n.getConstant('H');
         toolbarItems.push({ id: this.parent.element.id + '_height', cssClass: 'e-ie-resize-height', template: spanHeight, align: 'Center' });
         toolbarItems.push({ id: this.parent.element.id + '_resizeHeight', prefixIcon: 'e-icons e-clock-wise',
             tooltipText: this.l10n.getConstant('Height'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
-                showSpinButton: false, value: (this.parent.aspectWidth && this.parent.aspectHeight) ? this.parent.aspectHeight : Math.ceil(this.parent.img.destHeight),
-                format: '###.## px' })
+                showSpinButton: false, value: isResize ? this.parent.aspectHeight : null,
+                placeholder: isResize ? null : Math.ceil(this.parent.img.srcHeight).toString(), format: '###.## px' })
         });
         if (!this.isAspectRatio) {
             toolbarItems.push({ id: this.parent.element.id + '_aspectratio', prefixIcon: 'e-icons e-lock', align: 'Center', tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button' });
@@ -887,14 +916,11 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
         var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-        var aspectRatio = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
-        if (aspectRatio) {
-            if (!isNullOrUndefined(aspectRatioHeight)) {
-                aspectRatioWidth.addEventListener('keyup', this.heightAspectRatio.bind(this));
-            }
-            if (!isNullOrUndefined(aspectRatioWidth)) {
-                aspectRatioHeight.addEventListener('keyup', this.widthAspectRatio.bind(this));
-            }
+        if (!isNullOrUndefined(aspectRatioHeight)) {
+            aspectRatioWidth.addEventListener('keyup', this.heightAspectRatio.bind(this));
+        }
+        if (!isNullOrUndefined(aspectRatioWidth)) {
+            aspectRatioHeight.addEventListener('keyup', this.widthAspectRatio.bind(this));
         }
     };
     ToolbarModule.prototype.enableDisableTbrBtn = function () {
@@ -973,7 +999,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.fileSelect = function (inputElement, args) {
         var type = inputElement.files[0].type.split('/')[1];
-        if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg') {
+        if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg' || type === 'svg+xml') {
             this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
         }
         else {
@@ -3491,6 +3517,8 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.performDefTbrClick = function (type, isContextualToolbar, isDisabledAdjustment, isDisabledFilter, isFilterFinetune) {
         var parent = this.parent;
         var zoomIn = parent.element.querySelector('#' + parent.element.id + '_zoomIn');
+        var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
         var isCropSelection = false;
         var panBtn;
         var splitWords;
@@ -3570,12 +3598,27 @@ var ToolbarModule = /** @class */ (function () {
                 case 'aspectratio':
                     if (!parent.isCircleCrop && (isNullOrUndefined(parent.currSelectionPoint)) ||
                         (parent.currSelectionPoint && parent.currSelectionPoint.shape !== 'crop-circle')) {
+                        if (getComponent(aspectRatioWidth, 'numerictextbox').value) {
+                            parent.aspectWidth = getComponent(aspectRatioWidth, 'numerictextbox').value;
+                            parent.aspectHeight = getComponent(aspectRatioHeight, 'numerictextbox').value;
+                            parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: null, isAspectRatio: true } });
+                        }
                         parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                             height: parent.img.srcHeight };
                         this.refreshToolbar('resize');
                     }
                     break;
                 case 'nonaspectratio':
+                    if (getComponent(aspectRatioWidth, 'numerictextbox').value ||
+                        getComponent(aspectRatioHeight, 'numerictextbox').value) {
+                        parent.aspectWidth = getComponent(aspectRatioWidth, 'numerictextbox').value ?
+                            getComponent(aspectRatioWidth, 'numerictextbox').value :
+                            parseFloat(getComponent(aspectRatioWidth, 'numerictextbox').placeholder);
+                        parent.aspectHeight = getComponent(aspectRatioHeight, 'numerictextbox').value ?
+                            getComponent(aspectRatioHeight, 'numerictextbox').value :
+                            parseFloat(getComponent(aspectRatioHeight, 'numerictextbox').placeholder);
+                        parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: parent.aspectHeight, isAspectRatio: false } });
+                    }
                     parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                         height: parent.img.srcHeight };
                     this.refreshToolbar('resize');

package/styles/bootstrap-dark.css

@@ -224,9 +224,10 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   font-size: 18px;
 }
-.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -236,6 +237,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
   margin-top: -4px;
 }
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
+  margin-top: -1px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: 0;
+}
 .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -330,7 +336,7 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
   border: none;
 }
-.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
+.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
   font-size: 16px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -339,7 +345,8 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
   height: 18px;
   width: 18px;
-  margin-top: -4px;
+  margin-top: -2px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: 0;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
   font-size: 16px;
@@ -384,6 +391,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
   height: inherit !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/bootstrap.css

@@ -224,9 +224,10 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   font-size: 18px;
 }
-.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -236,6 +237,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
   margin-top: -4px;
 }
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
+  margin-top: -1px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: 0;
+}
 .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -330,7 +336,7 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
   border: none;
 }
-.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
+.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
   font-size: 16px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -339,7 +345,8 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
   height: 18px;
   width: 18px;
-  margin-top: -4px;
+  margin-top: -2px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: 0;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
   font-size: 16px;
@@ -384,6 +391,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
   height: inherit !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/bootstrap4.css

@@ -223,9 +223,10 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   font-size: 18px;
 }
-.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -235,6 +236,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
   margin-top: -4px;
 }
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
+  margin-top: -1px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: 0;
+}
 .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -328,7 +334,7 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
   border: none;
 }
-.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
+.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
   font-size: 16px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -337,7 +343,8 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
   height: 18px;
   width: 18px;
-  margin-top: -4px;
+  margin-top: -2px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: 0;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
   font-size: 16px;
@@ -382,6 +389,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
   height: inherit !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/bootstrap5-dark.css

@@ -236,9 +236,10 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
-.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -248,6 +249,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
   margin-top: -4px;
 }
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -4px;
+}
 .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -346,7 +352,7 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-icons.e-upload-icon {
   padding-top: 6px;
 }
-.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
+.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
   font-size: 18px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -355,7 +361,8 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
   height: 18px;
   width: 18px;
-  margin-top: -4px;
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -4px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
   font-size: 18px;
@@ -400,6 +407,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
   height: inherit !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/bootstrap5.css

@@ -236,9 +236,10 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
-.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -248,6 +249,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
   margin-top: -4px;
 }
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -4px;
+}
 .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -346,7 +352,7 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-icons.e-upload-icon {
   padding-top: 6px;
 }
-.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
+.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
   font-size: 18px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -355,7 +361,8 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
   height: 18px;
   width: 18px;
-  margin-top: -4px;
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -4px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
   font-size: 18px;
@@ -400,6 +407,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
   height: inherit !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fabric-dark.css

@@ -224,9 +224,10 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   font-size: 18px;
 }
-.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -236,6 +237,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
   margin-top: -4px;
 }
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -1px;
+}
 .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -330,7 +336,7 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
   border: none;
 }
-.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
+.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
   font-size: 16px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -339,7 +345,8 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
   height: 18px;
   width: 18px;
-  margin-top: -4px;
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -1px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
   font-size: 16px;
@@ -384,6 +391,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
   height: inherit !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fabric.css

@@ -224,9 +224,10 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   font-size: 18px;
 }
-.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -236,6 +237,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
   margin-top: -4px;
 }
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -1px;
+}
 .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -330,7 +336,7 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
   border: none;
 }
-.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
+.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
   font-size: 16px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -339,7 +345,8 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
   height: 18px;
   width: 18px;
-  margin-top: -4px;
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -1px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
   font-size: 16px;
@@ -384,6 +391,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
   height: inherit !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fluent-dark.css

@@ -232,9 +232,10 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   font-size: 20px;
 }
-.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -244,6 +245,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
   margin-top: -4px;
 }
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -4px;
+}
 .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -337,7 +343,7 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
   border: none;
 }
-.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
+.e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
   font-size: 18px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -346,7 +352,8 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
   height: 18px;
   width: 18px;
-  margin-top: -4px;
+  margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: -4px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
   font-size: 18px;
@@ -391,6 +398,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
   height: inherit !important; /* stylelint-disable-line declaration-no-important */
 }