@syncfusion/ej2-image-editor 20.3.50 → 20.4.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/.eslintrc.json +16 -1
  2. package/CHANGELOG.md +6 -0
  3. package/README.md +65 -2
  4. package/dist/ej2-image-editor.umd.min.js +2 -2
  5. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es2015.js +2639 -623
  7. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  8. package/dist/es6/ej2-image-editor.es5.js +2676 -652
  9. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  10. package/dist/global/ej2-image-editor.min.js +2 -2
  11. package/dist/global/ej2-image-editor.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +22 -24
  14. package/src/image-editor/image-editor-model.d.ts +102 -19
  15. package/src/image-editor/image-editor.d.ts +232 -31
  16. package/src/image-editor/image-editor.js +2676 -651
  17. package/styles/bootstrap-dark.css +36 -0
  18. package/styles/bootstrap.css +36 -0
  19. package/styles/bootstrap4.css +36 -0
  20. package/styles/bootstrap5-dark.css +36 -0
  21. package/styles/bootstrap5.css +36 -0
  22. package/styles/fabric-dark.css +36 -0
  23. package/styles/fabric.css +36 -0
  24. package/styles/fluent-dark.css +36 -0
  25. package/styles/fluent.css +36 -0
  26. package/styles/highcontrast-light.css +36 -0
  27. package/styles/highcontrast.css +36 -0
  28. package/styles/image-editor/_bootstrap-dark-definition.scss +1 -0
  29. package/styles/image-editor/_bootstrap-definition.scss +1 -0
  30. package/styles/image-editor/_bootstrap4-definition.scss +1 -0
  31. package/styles/image-editor/_bootstrap5-definition.scss +1 -0
  32. package/styles/image-editor/_fabric-dark-definition.scss +1 -0
  33. package/styles/image-editor/_fabric-definition.scss +1 -0
  34. package/styles/image-editor/_fluent-definition.scss +1 -0
  35. package/styles/image-editor/_fusionnew-definition.scss +1 -0
  36. package/styles/image-editor/_highcontrast-definition.scss +1 -0
  37. package/styles/image-editor/_highcontrast-light-definition.scss +1 -0
  38. package/styles/image-editor/_layout.scss +38 -0
  39. package/styles/image-editor/_material-dark-definition.scss +1 -0
  40. package/styles/image-editor/_material-definition.scss +1 -0
  41. package/styles/image-editor/_material3-definition.scss +1 -0
  42. package/styles/image-editor/_tailwind-definition.scss +1 -0
  43. package/styles/image-editor/_theme.scss +11 -0
  44. package/styles/image-editor/bootstrap-dark.css +36 -0
  45. package/styles/image-editor/bootstrap-dark.scss +1 -0
  46. package/styles/image-editor/bootstrap.css +36 -0
  47. package/styles/image-editor/bootstrap.scss +1 -0
  48. package/styles/image-editor/bootstrap4.css +36 -0
  49. package/styles/image-editor/bootstrap4.scss +1 -0
  50. package/styles/image-editor/bootstrap5-dark.css +36 -0
  51. package/styles/image-editor/bootstrap5-dark.scss +1 -0
  52. package/styles/image-editor/bootstrap5.css +36 -0
  53. package/styles/image-editor/bootstrap5.scss +1 -0
  54. package/styles/image-editor/fabric-dark.css +36 -0
  55. package/styles/image-editor/fabric-dark.scss +1 -0
  56. package/styles/image-editor/fabric.css +36 -0
  57. package/styles/image-editor/fabric.scss +1 -0
  58. package/styles/image-editor/fluent-dark.css +36 -0
  59. package/styles/image-editor/fluent-dark.scss +1 -0
  60. package/styles/image-editor/fluent.css +36 -0
  61. package/styles/image-editor/fluent.scss +1 -0
  62. package/styles/image-editor/highcontrast-light.css +36 -0
  63. package/styles/image-editor/highcontrast-light.scss +1 -0
  64. package/styles/image-editor/highcontrast.css +36 -0
  65. package/styles/image-editor/highcontrast.scss +1 -0
  66. package/styles/image-editor/material-dark.css +36 -0
  67. package/styles/image-editor/material-dark.scss +1 -0
  68. package/styles/image-editor/material.css +36 -0
  69. package/styles/image-editor/material.scss +1 -0
  70. package/styles/image-editor/tailwind-dark.css +36 -0
  71. package/styles/image-editor/tailwind-dark.scss +1 -0
  72. package/styles/image-editor/tailwind.css +36 -0
  73. package/styles/image-editor/tailwind.scss +1 -0
  74. package/styles/material-dark.css +36 -0
  75. package/styles/material.css +36 -0
  76. package/styles/tailwind-dark.css +36 -0
  77. package/styles/tailwind.css +36 -0
package/styles/image-editor/highcontrast-light.css CHANGED
@@ -126,6 +126,10 @@
126
126
  .e-device.e-image-editor .e-img-font-style.e-template {
127
127
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
128
128
  }
129
+ .e-device.e-image-editor .e-slider-container {
130
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
131
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
132
+ }
129
133
 
130
134
  .e-bigger .e-image-editor .e-toolbar,
131
135
  .e-image-editor.e-bigger .e-toolbar {
@@ -225,10 +229,42 @@
225
229
  .e-image-editor .e-bottom-toolbar {
226
230
  border-top: 1px solid #000;
227
231
  }
232
+ .e-image-editor .e-contextual-toolbar-wrapper {
233
+ width: 100%;
234
+ z-index: 1;
235
+ }
236
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
237
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
238
+ }
239
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
240
+ display: none;
241
+ }
242
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
243
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
244
+ }
245
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
246
+ border: 2px solid transparent;
247
+ height: 100px;
248
+ }
249
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
250
+ border-top: 2px solid;
251
+ }
252
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
253
+ margin-left: calc(50% - 137px);
254
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
255
+ }
228
256
 
229
257
  .e-image-editor {
230
258
  background: #fff;
231
259
  }
260
+ .e-image-editor .e-contextual-toolbar-wrapper {
261
+ background: #fff;
262
+ border-top: 1px solid #000;
263
+ border-bottom: 1px solid #000;
264
+ }
265
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
266
+ border-color: #400074;
267
+ }
232
268
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
233
269
  color: #000;
234
270
  }
package/styles/image-editor/highcontrast-light.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-inputs/styles/textbox/highcontrast-light-definition.scss';
6
6
  @import 'ej2-inputs/styles/uploader/highcontrast-light-definition.scss';
7
7
  @import 'ej2-popups/styles/tooltip/highcontrast-light-definition.scss';
8
+ @import 'ej2-inputs/styles/color-picker/highcontrast-light-definition.scss';
8
9
  @import 'ej2-navigations/styles/toolbar/highcontrast-light-definition.scss';
9
10
  @import 'ej2-popups/styles/spinner/highcontrast-light-definition.scss';
10
11
  @import 'highcontrast-light-definition.scss';
package/styles/image-editor/highcontrast.css CHANGED
@@ -126,6 +126,10 @@
126
126
  .e-device.e-image-editor .e-img-font-style.e-template {
127
127
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
128
128
  }
129
+ .e-device.e-image-editor .e-slider-container {
130
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
131
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
132
+ }
129
133
 
130
134
  .e-bigger .e-image-editor .e-toolbar,
131
135
  .e-image-editor.e-bigger .e-toolbar {
@@ -225,10 +229,42 @@
225
229
  .e-image-editor .e-bottom-toolbar {
226
230
  border-top: 1px solid #fff;
227
231
  }
232
+ .e-image-editor .e-contextual-toolbar-wrapper {
233
+ width: 100%;
234
+ z-index: 1;
235
+ }
236
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
237
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
238
+ }
239
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
240
+ display: none;
241
+ }
242
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
243
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
244
+ }
245
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
246
+ border: 2px solid transparent;
247
+ height: 100px;
248
+ }
249
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
250
+ border-top: 2px solid;
251
+ }
252
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
253
+ margin-left: calc(50% - 137px);
254
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
255
+ }
228
256
 
229
257
  .e-image-editor {
230
258
  background: #000;
231
259
  }
260
+ .e-image-editor .e-contextual-toolbar-wrapper {
261
+ background: #000;
262
+ border-top: 1px solid #fff;
263
+ border-bottom: 1px solid #fff;
264
+ }
265
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
266
+ border-color: #ffd939;
267
+ }
232
268
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
233
269
  color: #fff;
234
270
  }
package/styles/image-editor/highcontrast.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-inputs/styles/textbox/highcontrast-definition.scss';
6
6
  @import 'ej2-inputs/styles/uploader/highcontrast-definition.scss';
7
7
  @import 'ej2-popups/styles/tooltip/highcontrast-definition.scss';
8
+ @import 'ej2-inputs/styles/color-picker/highcontrast-definition.scss';
8
9
  @import 'ej2-navigations/styles/toolbar/highcontrast-definition.scss';
9
10
  @import 'ej2-popups/styles/spinner/highcontrast-definition.scss';
10
11
  @import 'highcontrast-definition.scss';
package/styles/image-editor/material-dark.css CHANGED
@@ -136,6 +136,10 @@
136
136
  .e-device.e-image-editor .e-img-font-style.e-template {
137
137
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
138
138
  }
139
+ .e-device.e-image-editor .e-slider-container {
140
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
141
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
142
+ }
139
143
 
140
144
  .e-bigger .e-image-editor .e-toolbar,
141
145
  .e-image-editor.e-bigger .e-toolbar {
@@ -243,10 +247,42 @@
243
247
  .e-image-editor .e-bottom-toolbar {
244
248
  border-top: 1px solid #757575;
245
249
  }
250
+ .e-image-editor .e-contextual-toolbar-wrapper {
251
+ width: 100%;
252
+ z-index: 1;
253
+ }
254
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
255
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
256
+ }
257
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
258
+ display: none;
259
+ }
260
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
261
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
262
+ }
263
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
264
+ border: 2px solid transparent;
265
+ height: 100px;
266
+ }
267
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
268
+ border-top: 2px solid;
269
+ }
270
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
271
+ margin-left: calc(50% - 137px);
272
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
273
+ }
246
274
 
247
275
  .e-image-editor {
248
276
  background: #292929;
249
277
  }
278
+ .e-image-editor .e-contextual-toolbar-wrapper {
279
+ background: #212121;
280
+ border-top: 1px solid #757575;
281
+ border-bottom: 1px solid #757575;
282
+ }
283
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
284
+ border-color: #7d7d7d;
285
+ }
250
286
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
251
287
  color: #fff;
252
288
  }
package/styles/image-editor/material-dark.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-inputs/styles/textbox/material-dark-definition.scss';
6
6
  @import 'ej2-inputs/styles/uploader/material-dark-definition.scss';
7
7
  @import 'ej2-popups/styles/tooltip/material-dark-definition.scss';
8
+ @import 'ej2-inputs/styles/color-picker/material-dark-definition.scss';
8
9
  @import 'ej2-navigations/styles/toolbar/material-dark-definition.scss';
9
10
  @import 'ej2-popups/styles/spinner/material-dark-definition.scss';
10
11
  @import 'material-dark-definition.scss';
package/styles/image-editor/material.css CHANGED
@@ -136,6 +136,10 @@
136
136
  .e-device.e-image-editor .e-img-font-style.e-template {
137
137
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
138
138
  }
139
+ .e-device.e-image-editor .e-slider-container {
140
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
141
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
142
+ }
139
143
 
140
144
  .e-bigger .e-image-editor .e-toolbar,
141
145
  .e-image-editor.e-bigger .e-toolbar {
@@ -243,10 +247,42 @@
243
247
  .e-image-editor .e-bottom-toolbar {
244
248
  border-top: 1px solid #bdbdbd;
245
249
  }
250
+ .e-image-editor .e-contextual-toolbar-wrapper {
251
+ width: 100%;
252
+ z-index: 1;
253
+ }
254
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
255
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
256
+ }
257
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
258
+ display: none;
259
+ }
260
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
261
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
262
+ }
263
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
264
+ border: 2px solid transparent;
265
+ height: 100px;
266
+ }
267
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
268
+ border-top: 2px solid;
269
+ }
270
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
271
+ margin-left: calc(50% - 137px);
272
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
273
+ }
246
274
 
247
275
  .e-image-editor {
248
276
  background: #eee;
249
277
  }
278
+ .e-image-editor .e-contextual-toolbar-wrapper {
279
+ background: #fafafa;
280
+ border-top: 1px solid #bdbdbd;
281
+ border-bottom: 1px solid #bdbdbd;
282
+ }
283
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
284
+ border-color: rgba(184, 184, 184, 0.9584);
285
+ }
250
286
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
251
287
  color: #757575;
252
288
  }
package/styles/image-editor/material.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-inputs/styles/textbox/material-definition.scss';
6
6
  @import 'ej2-inputs/styles/uploader/material-definition.scss';
7
7
  @import 'ej2-popups/styles/tooltip/material-definition.scss';
8
+ @import 'ej2-inputs/styles/color-picker/material-definition.scss';
8
9
  @import 'ej2-navigations/styles/toolbar/material-definition.scss';
9
10
  @import 'ej2-popups/styles/spinner/material-definition.scss';
10
11
  @import 'material-definition.scss';
package/styles/image-editor/tailwind-dark.css CHANGED
@@ -133,6 +133,10 @@
133
133
  .e-device.e-image-editor .e-img-font-style.e-template {
134
134
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
135
135
  }
136
+ .e-device.e-image-editor .e-slider-container {
137
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
138
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
139
+ }
136
140
 
137
141
  .e-bigger .e-image-editor .e-toolbar,
138
142
  .e-image-editor.e-bigger .e-toolbar {
@@ -232,10 +236,42 @@
232
236
  .e-image-editor .e-bottom-toolbar {
233
237
  border-top: 1px solid #4b5563;
234
238
  }
239
+ .e-image-editor .e-contextual-toolbar-wrapper {
240
+ width: 100%;
241
+ z-index: 1;
242
+ }
243
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
244
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
245
+ }
246
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
247
+ display: none;
248
+ }
249
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
250
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
251
+ }
252
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
253
+ border: 2px solid transparent;
254
+ height: 100px;
255
+ }
256
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
257
+ border-top: 2px solid;
258
+ }
259
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
260
+ margin-left: calc(50% - 137px);
261
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
262
+ }
235
263
 
236
264
  .e-image-editor {
237
265
  background: #4b5563;
238
266
  }
267
+ .e-image-editor .e-contextual-toolbar-wrapper {
268
+ background: #374151;
269
+ border-top: 1px solid #4b5563;
270
+ border-bottom: 1px solid #4b5563;
271
+ }
272
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
273
+ border-color: #4b5563;
274
+ }
239
275
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
240
276
  color: #d1d5db;
241
277
  }
package/styles/image-editor/tailwind-dark.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-inputs/styles/textbox/tailwind-dark-definition.scss';
6
6
  @import 'ej2-inputs/styles/uploader/tailwind-dark-definition.scss';
7
7
  @import 'ej2-popups/styles/tooltip/tailwind-dark-definition.scss';
8
+ @import 'ej2-inputs/styles/color-picker/tailwind-dark-definition.scss';
8
9
  @import 'ej2-navigations/styles/toolbar/tailwind-dark-definition.scss';
9
10
  @import 'ej2-popups/styles/spinner/tailwind-dark-definition.scss';
10
11
  @import 'tailwind-dark-definition.scss';
package/styles/image-editor/tailwind.css CHANGED
@@ -133,6 +133,10 @@
133
133
  .e-device.e-image-editor .e-img-font-style.e-template {
134
134
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
135
135
  }
136
+ .e-device.e-image-editor .e-slider-container {
137
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
138
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
139
+ }
136
140
 
137
141
  .e-bigger .e-image-editor .e-toolbar,
138
142
  .e-image-editor.e-bigger .e-toolbar {
@@ -232,10 +236,42 @@
232
236
  .e-image-editor .e-bottom-toolbar {
233
237
  border-top: 1px solid #e5e7eb;
234
238
  }
239
+ .e-image-editor .e-contextual-toolbar-wrapper {
240
+ width: 100%;
241
+ z-index: 1;
242
+ }
243
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
244
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
245
+ }
246
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
247
+ display: none;
248
+ }
249
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
250
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
251
+ }
252
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
253
+ border: 2px solid transparent;
254
+ height: 100px;
255
+ }
256
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
257
+ border-top: 2px solid;
258
+ }
259
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
260
+ margin-left: calc(50% - 137px);
261
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
262
+ }
235
263
 
236
264
  .e-image-editor {
237
265
  background: #e5e7eb;
238
266
  }
267
+ .e-image-editor .e-contextual-toolbar-wrapper {
268
+ background: #f3f4f6;
269
+ border-top: 1px solid #e5e7eb;
270
+ border-bottom: 1px solid #e5e7eb;
271
+ }
272
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
273
+ border-color: #e5e7eb;
274
+ }
239
275
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
240
276
  color: #6b7280;
241
277
  }
package/styles/image-editor/tailwind.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-inputs/styles/textbox/tailwind-definition.scss';
6
6
  @import 'ej2-inputs/styles/uploader/tailwind-definition.scss';
7
7
  @import 'ej2-popups/styles/tooltip/tailwind-definition.scss';
8
+ @import 'ej2-inputs/styles/color-picker/tailwind-definition.scss';
8
9
  @import 'ej2-navigations/styles/toolbar/tailwind-definition.scss';
9
10
  @import 'ej2-popups/styles/spinner/tailwind-definition.scss';
10
11
  @import 'tailwind-definition.scss';
package/styles/material-dark.css CHANGED
@@ -136,6 +136,10 @@
136
136
  .e-device.e-image-editor .e-img-font-style.e-template {
137
137
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
138
138
  }
139
+ .e-device.e-image-editor .e-slider-container {
140
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
141
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
142
+ }
139
143
 
140
144
  .e-bigger .e-image-editor .e-toolbar,
141
145
  .e-image-editor.e-bigger .e-toolbar {
@@ -243,10 +247,42 @@
243
247
  .e-image-editor .e-bottom-toolbar {
244
248
  border-top: 1px solid #757575;
245
249
  }
250
+ .e-image-editor .e-contextual-toolbar-wrapper {
251
+ width: 100%;
252
+ z-index: 1;
253
+ }
254
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
255
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
256
+ }
257
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
258
+ display: none;
259
+ }
260
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
261
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
262
+ }
263
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
264
+ border: 2px solid transparent;
265
+ height: 100px;
266
+ }
267
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
268
+ border-top: 2px solid;
269
+ }
270
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
271
+ margin-left: calc(50% - 137px);
272
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
273
+ }
246
274
 
247
275
  .e-image-editor {
248
276
  background: #292929;
249
277
  }
278
+ .e-image-editor .e-contextual-toolbar-wrapper {
279
+ background: #212121;
280
+ border-top: 1px solid #757575;
281
+ border-bottom: 1px solid #757575;
282
+ }
283
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
284
+ border-color: #7d7d7d;
285
+ }
250
286
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
251
287
  color: #fff;
252
288
  }
package/styles/material.css CHANGED
@@ -136,6 +136,10 @@
136
136
  .e-device.e-image-editor .e-img-font-style.e-template {
137
137
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
138
138
  }
139
+ .e-device.e-image-editor .e-slider-container {
140
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
141
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
142
+ }
139
143
 
140
144
  .e-bigger .e-image-editor .e-toolbar,
141
145
  .e-image-editor.e-bigger .e-toolbar {
@@ -243,10 +247,42 @@
243
247
  .e-image-editor .e-bottom-toolbar {
244
248
  border-top: 1px solid #bdbdbd;
245
249
  }
250
+ .e-image-editor .e-contextual-toolbar-wrapper {
251
+ width: 100%;
252
+ z-index: 1;
253
+ }
254
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
255
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
256
+ }
257
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
258
+ display: none;
259
+ }
260
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
261
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
262
+ }
263
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
264
+ border: 2px solid transparent;
265
+ height: 100px;
266
+ }
267
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
268
+ border-top: 2px solid;
269
+ }
270
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
271
+ margin-left: calc(50% - 137px);
272
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
273
+ }
246
274
 
247
275
  .e-image-editor {
248
276
  background: #eee;
249
277
  }
278
+ .e-image-editor .e-contextual-toolbar-wrapper {
279
+ background: #fafafa;
280
+ border-top: 1px solid #bdbdbd;
281
+ border-bottom: 1px solid #bdbdbd;
282
+ }
283
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
284
+ border-color: rgba(184, 184, 184, 0.9584);
285
+ }
250
286
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
251
287
  color: #757575;
252
288
  }
package/styles/tailwind-dark.css CHANGED
@@ -133,6 +133,10 @@
133
133
  .e-device.e-image-editor .e-img-font-style.e-template {
134
134
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
135
135
  }
136
+ .e-device.e-image-editor .e-slider-container {
137
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
138
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
139
+ }
136
140
 
137
141
  .e-bigger .e-image-editor .e-toolbar,
138
142
  .e-image-editor.e-bigger .e-toolbar {
@@ -232,10 +236,42 @@
232
236
  .e-image-editor .e-bottom-toolbar {
233
237
  border-top: 1px solid #4b5563;
234
238
  }
239
+ .e-image-editor .e-contextual-toolbar-wrapper {
240
+ width: 100%;
241
+ z-index: 1;
242
+ }
243
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
244
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
245
+ }
246
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
247
+ display: none;
248
+ }
249
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
250
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
251
+ }
252
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
253
+ border: 2px solid transparent;
254
+ height: 100px;
255
+ }
256
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
257
+ border-top: 2px solid;
258
+ }
259
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
260
+ margin-left: calc(50% - 137px);
261
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
262
+ }
235
263
 
236
264
  .e-image-editor {
237
265
  background: #4b5563;
238
266
  }
267
+ .e-image-editor .e-contextual-toolbar-wrapper {
268
+ background: #374151;
269
+ border-top: 1px solid #4b5563;
270
+ border-bottom: 1px solid #4b5563;
271
+ }
272
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
273
+ border-color: #4b5563;
274
+ }
239
275
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
240
276
  color: #d1d5db;
241
277
  }
package/styles/tailwind.css CHANGED
@@ -133,6 +133,10 @@
133
133
  .e-device.e-image-editor .e-img-font-style.e-template {
134
134
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
135
135
  }
136
+ .e-device.e-image-editor .e-slider-container {
137
+ margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
138
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
139
+ }
136
140
 
137
141
  .e-bigger .e-image-editor .e-toolbar,
138
142
  .e-image-editor.e-bigger .e-toolbar {
@@ -232,10 +236,42 @@
232
236
  .e-image-editor .e-bottom-toolbar {
233
237
  border-top: 1px solid #e5e7eb;
234
238
  }
239
+ .e-image-editor .e-contextual-toolbar-wrapper {
240
+ width: 100%;
241
+ z-index: 1;
242
+ }
243
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
244
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
245
+ }
246
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
247
+ display: none;
248
+ }
249
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
250
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
251
+ }
252
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
253
+ border: 2px solid transparent;
254
+ height: 100px;
255
+ }
256
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
257
+ border-top: 2px solid;
258
+ }
259
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
260
+ margin-left: calc(50% - 137px);
261
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
262
+ }
235
263
 
236
264
  .e-image-editor {
237
265
  background: #e5e7eb;
238
266
  }
267
+ .e-image-editor .e-contextual-toolbar-wrapper {
268
+ background: #f3f4f6;
269
+ border-top: 1px solid #e5e7eb;
270
+ border-bottom: 1px solid #e5e7eb;
271
+ }
272
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
273
+ border-color: #e5e7eb;
274
+ }
239
275
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
240
276
  color: #6b7280;
241
277
  }