@syncfusion/ej2-image-editor 21.2.10 → 22.1.36

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 (107) hide show
  1. package/.eslintrc.json +1 -0
  2. package/CHANGELOG.md +8 -32
  3. package/dist/ej2-image-editor.umd.min.js +2 -2
  4. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-image-editor.es2015.js +19320 -12622
  6. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-image-editor.es5.js +19139 -12414
  8. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  9. package/dist/global/ej2-image-editor.min.js +2 -2
  10. package/dist/global/ej2-image-editor.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +11 -11
  13. package/src/image-editor/action/crop.d.ts +36 -0
  14. package/src/image-editor/action/crop.js +829 -0
  15. package/src/image-editor/action/draw.d.ts +125 -0
  16. package/src/image-editor/action/draw.js +3263 -0
  17. package/src/image-editor/action/export.d.ts +23 -0
  18. package/src/image-editor/action/export.js +364 -0
  19. package/src/image-editor/action/filter.d.ts +35 -0
  20. package/src/image-editor/action/filter.js +699 -0
  21. package/src/image-editor/action/freehand-draw.d.ts +61 -0
  22. package/src/image-editor/action/freehand-draw.js +1015 -0
  23. package/src/image-editor/action/index.d.ts +9 -0
  24. package/src/image-editor/action/index.js +9 -0
  25. package/src/image-editor/action/selection.d.ts +139 -0
  26. package/src/image-editor/action/selection.js +4518 -0
  27. package/src/image-editor/action/shape.d.ts +94 -0
  28. package/src/image-editor/action/shape.js +2745 -0
  29. package/src/image-editor/action/transform.d.ts +67 -0
  30. package/src/image-editor/action/transform.js +1859 -0
  31. package/src/image-editor/action/undo-redo.d.ts +43 -0
  32. package/src/image-editor/action/undo-redo.js +800 -0
  33. package/src/image-editor/base/enum.d.ts +189 -0
  34. package/src/image-editor/base/enum.js +198 -0
  35. package/src/image-editor/{image-editor-model.d.ts → base/image-editor-model.d.ts} +130 -42
  36. package/src/image-editor/{image-editor.d.ts → base/image-editor.d.ts} +413 -1111
  37. package/src/image-editor/base/image-editor.js +2270 -0
  38. package/src/image-editor/base/index.d.ts +4 -0
  39. package/src/image-editor/base/index.js +2 -0
  40. package/src/image-editor/base/interface.d.ts +1128 -0
  41. package/src/image-editor/base/interface.js +1 -0
  42. package/src/image-editor/index.d.ts +3 -5
  43. package/src/image-editor/index.js +3 -4
  44. package/src/image-editor/renderer/index.d.ts +1 -0
  45. package/src/image-editor/renderer/index.js +1 -0
  46. package/src/image-editor/renderer/toolbar.d.ts +105 -0
  47. package/src/image-editor/renderer/toolbar.js +3018 -0
  48. package/styles/bootstrap-dark.css +69 -3
  49. package/styles/bootstrap.css +69 -3
  50. package/styles/bootstrap4.css +69 -3
  51. package/styles/bootstrap5-dark.css +69 -3
  52. package/styles/bootstrap5.css +69 -3
  53. package/styles/fabric-dark.css +69 -3
  54. package/styles/fabric.css +69 -3
  55. package/styles/fluent-dark.css +69 -3
  56. package/styles/fluent.css +69 -3
  57. package/styles/highcontrast-light.css +71 -5
  58. package/styles/highcontrast.css +72 -5
  59. package/styles/image-editor/_highcontrast-definition.scss +1 -1
  60. package/styles/image-editor/_highcontrast-light-definition.scss +1 -1
  61. package/styles/image-editor/_layout.scss +21 -7
  62. package/styles/image-editor/_material3-dark-definition.scss +1 -0
  63. package/styles/image-editor/_material3-definition.scss +11 -0
  64. package/styles/image-editor/_theme.scss +7 -2
  65. package/styles/image-editor/bootstrap-dark.css +69 -3
  66. package/styles/image-editor/bootstrap.css +69 -3
  67. package/styles/image-editor/bootstrap4.css +69 -3
  68. package/styles/image-editor/bootstrap5-dark.css +69 -3
  69. package/styles/image-editor/bootstrap5.css +69 -3
  70. package/styles/image-editor/fabric-dark.css +69 -3
  71. package/styles/image-editor/fabric.css +69 -3
  72. package/styles/image-editor/fluent-dark.css +69 -3
  73. package/styles/image-editor/fluent.css +69 -3
  74. package/styles/image-editor/highcontrast-light.css +71 -5
  75. package/styles/image-editor/highcontrast.css +72 -5
  76. package/styles/image-editor/icons/_bootstrap-dark.scss +132 -0
  77. package/styles/image-editor/icons/_bootstrap.scss +132 -0
  78. package/styles/image-editor/icons/_bootstrap4.scss +132 -0
  79. package/styles/image-editor/icons/_bootstrap5.scss +132 -0
  80. package/styles/image-editor/icons/_fabric-dark.scss +132 -0
  81. package/styles/image-editor/icons/_fabric.scss +132 -0
  82. package/styles/image-editor/icons/_fluent.scss +132 -0
  83. package/styles/image-editor/icons/_fusionnew.scss +132 -0
  84. package/styles/image-editor/icons/_highcontrast-light.scss +132 -0
  85. package/styles/image-editor/icons/_highcontrast.scss +132 -0
  86. package/styles/image-editor/icons/_material-dark.scss +132 -0
  87. package/styles/image-editor/icons/_material.scss +132 -0
  88. package/styles/image-editor/icons/_material3-dark.scss +1 -0
  89. package/styles/image-editor/icons/_material3.scss +133 -1
  90. package/styles/image-editor/icons/_tailwind.scss +132 -0
  91. package/styles/image-editor/material-dark.css +69 -3
  92. package/styles/image-editor/material.css +69 -3
  93. package/styles/image-editor/material3-dark.css +453 -0
  94. package/styles/image-editor/material3-dark.scss +14 -0
  95. package/styles/image-editor/material3.css +509 -0
  96. package/styles/image-editor/material3.scss +14 -0
  97. package/styles/image-editor/tailwind-dark.css +69 -3
  98. package/styles/image-editor/tailwind.css +69 -3
  99. package/styles/material-dark.css +69 -3
  100. package/styles/material.css +69 -3
  101. package/styles/material3-dark.css +453 -0
  102. package/styles/material3-dark.scss +3 -0
  103. package/styles/material3.css +509 -0
  104. package/styles/material3.scss +3 -0
  105. package/styles/tailwind-dark.css +69 -3
  106. package/styles/tailwind.css +69 -3
  107. package/src/image-editor/image-editor.js +0 -14827
package/styles/image-editor/bootstrap-dark.css CHANGED
@@ -67,6 +67,66 @@
67
67
  .e-image-editor .e-fill.e-template .e-caret::before {
68
68
  content: "\e35c";
69
69
  }
70
+ .e-image-editor .e-custom::before {
71
+ content: "\e974";
72
+ }
73
+ .e-image-editor .e-circle::before {
74
+ content: "\e671";
75
+ }
76
+ .e-image-editor .e-square::before {
77
+ content: "\e976";
78
+ }
79
+ .e-image-editor .e-custom-a::before {
80
+ content: "\e977";
81
+ }
82
+ .e-image-editor .e-custom-b::before {
83
+ content: "\e978";
84
+ }
85
+ .e-image-editor .e-custom-c::before {
86
+ content: "\e979";
87
+ }
88
+ .e-image-editor .e-custom-d::before {
89
+ content: "\e97a";
90
+ }
91
+ .e-image-editor .e-custom-e::before {
92
+ content: "\e97b";
93
+ }
94
+ .e-image-editor .e-horizontal-flip::before {
95
+ content: "\e95b";
96
+ }
97
+ .e-image-editor .e-vertical-flip::before {
98
+ content: "\e96f";
99
+ }
100
+ .e-image-editor .e-clock-wise::before {
101
+ content: "\e971";
102
+ }
103
+ .e-image-editor .e-anti-clock-wise::before {
104
+ content: "\e970";
105
+ }
106
+ .e-image-editor .e-rectangle::before {
107
+ content: "\e670";
108
+ }
109
+ .e-image-editor .e-circle::before {
110
+ content: "\e671";
111
+ }
112
+ .e-image-editor .e-triangle::before {
113
+ content: "\e954";
114
+ }
115
+ .e-image-editor .e-line::before {
116
+ content: "\e668";
117
+ }
118
+ .e-image-editor .e-add-text::before {
119
+ content: "\e35b";
120
+ }
121
+ .e-image-editor .e-free-pen::before {
122
+ content: "\e767";
123
+ }
124
+ .e-image-editor .e-arrow::before {
125
+ content: "\e669";
126
+ }
127
+ .e-image-editor .e-path::before {
128
+ content: "\e931";
129
+ }
70
130
 
71
131
  .e-dropdown-popup.e-image-popup .e-custom::before {
72
132
  content: "\e974";
@@ -122,6 +182,12 @@
122
182
  .e-dropdown-popup.e-image-popup .e-anti-clock-wise::before {
123
183
  content: "\e970";
124
184
  }
185
+ .e-dropdown-popup.e-image-popup .e-arrow::before {
186
+ content: "\e669";
187
+ }
188
+ .e-dropdown-popup.e-image-popup .e-path::before {
189
+ content: "\e931";
190
+ }
125
191
 
126
192
  .e-ie-toolbar-upload-div.e-hide,
127
193
  .e-ie-toolbar-upload-btn.e-hide {
@@ -252,11 +318,11 @@
252
318
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
253
319
  height: auto !important; /* stylelint-disable-line declaration-no-important */
254
320
  }
255
- .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
321
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
256
322
  border: 2px solid transparent;
257
323
  height: 100px;
258
324
  }
259
- .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 {
325
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
260
326
  border-top: 2px solid;
261
327
  }
262
328
  .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
@@ -272,7 +338,7 @@
272
338
  border-top: 1px solid #acacac;
273
339
  border-bottom: 1px solid #acacac;
274
340
  }
275
- .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 {
341
+ .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, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
276
342
  border-color: #2a2a2a;
277
343
  }
278
344
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
package/styles/image-editor/bootstrap.css CHANGED
@@ -67,6 +67,66 @@
67
67
  .e-image-editor .e-fill.e-template .e-caret::before {
68
68
  content: "\e35c";
69
69
  }
70
+ .e-image-editor .e-custom::before {
71
+ content: "\e974";
72
+ }
73
+ .e-image-editor .e-circle::before {
74
+ content: "\e671";
75
+ }
76
+ .e-image-editor .e-square::before {
77
+ content: "\e976";
78
+ }
79
+ .e-image-editor .e-custom-a::before {
80
+ content: "\e977";
81
+ }
82
+ .e-image-editor .e-custom-b::before {
83
+ content: "\e978";
84
+ }
85
+ .e-image-editor .e-custom-c::before {
86
+ content: "\e979";
87
+ }
88
+ .e-image-editor .e-custom-d::before {
89
+ content: "\e97a";
90
+ }
91
+ .e-image-editor .e-custom-e::before {
92
+ content: "\e97b";
93
+ }
94
+ .e-image-editor .e-horizontal-flip::before {
95
+ content: "\e95b";
96
+ }
97
+ .e-image-editor .e-vertical-flip::before {
98
+ content: "\e96f";
99
+ }
100
+ .e-image-editor .e-clock-wise::before {
101
+ content: "\e971";
102
+ }
103
+ .e-image-editor .e-anti-clock-wise::before {
104
+ content: "\e970";
105
+ }
106
+ .e-image-editor .e-rectangle::before {
107
+ content: "\e670";
108
+ }
109
+ .e-image-editor .e-circle::before {
110
+ content: "\e671";
111
+ }
112
+ .e-image-editor .e-triangle::before {
113
+ content: "\e954";
114
+ }
115
+ .e-image-editor .e-line::before {
116
+ content: "\e668";
117
+ }
118
+ .e-image-editor .e-add-text::before {
119
+ content: "\e35b";
120
+ }
121
+ .e-image-editor .e-free-pen::before {
122
+ content: "\e767";
123
+ }
124
+ .e-image-editor .e-arrow::before {
125
+ content: "\e669";
126
+ }
127
+ .e-image-editor .e-path::before {
128
+ content: "\e931";
129
+ }
70
130
 
71
131
  .e-dropdown-popup.e-image-popup .e-custom::before {
72
132
  content: "\e974";
@@ -122,6 +182,12 @@
122
182
  .e-dropdown-popup.e-image-popup .e-anti-clock-wise::before {
123
183
  content: "\e970";
124
184
  }
185
+ .e-dropdown-popup.e-image-popup .e-arrow::before {
186
+ content: "\e669";
187
+ }
188
+ .e-dropdown-popup.e-image-popup .e-path::before {
189
+ content: "\e931";
190
+ }
125
191
 
126
192
  .e-ie-toolbar-upload-div.e-hide,
127
193
  .e-ie-toolbar-upload-btn.e-hide {
@@ -252,11 +318,11 @@
252
318
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
253
319
  height: auto !important; /* stylelint-disable-line declaration-no-important */
254
320
  }
255
- .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
321
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
256
322
  border: 2px solid transparent;
257
323
  height: 100px;
258
324
  }
259
- .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 {
325
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
260
326
  border-top: 2px solid;
261
327
  }
262
328
  .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
@@ -272,7 +338,7 @@
272
338
  border-top: 1px solid #ccc;
273
339
  border-bottom: 1px solid #ccc;
274
340
  }
275
- .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 {
341
+ .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, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
276
342
  border-color: #e6e6e6;
277
343
  }
278
344
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
package/styles/image-editor/bootstrap4.css CHANGED
@@ -67,6 +67,66 @@
67
67
  .e-image-editor .e-fill.e-template .e-caret::before {
68
68
  content: "\e754";
69
69
  }
70
+ .e-image-editor .e-custom::before {
71
+ content: "\e964";
72
+ }
73
+ .e-image-editor .e-circle::before {
74
+ content: "\e671";
75
+ }
76
+ .e-image-editor .e-square::before {
77
+ content: "\e965";
78
+ }
79
+ .e-image-editor .e-custom-a::before {
80
+ content: "\e966";
81
+ }
82
+ .e-image-editor .e-custom-b::before {
83
+ content: "\e967";
84
+ }
85
+ .e-image-editor .e-custom-c::before {
86
+ content: "\e968";
87
+ }
88
+ .e-image-editor .e-custom-d::before {
89
+ content: "\e96a";
90
+ }
91
+ .e-image-editor .e-custom-e::before {
92
+ content: "\e96b";
93
+ }
94
+ .e-image-editor .e-horizontal-flip::before {
95
+ content: "\e95c";
96
+ }
97
+ .e-image-editor .e-vertical-flip::before {
98
+ content: "\e95d";
99
+ }
100
+ .e-image-editor .e-clock-wise::before {
101
+ content: "\e960";
102
+ }
103
+ .e-image-editor .e-anti-clock-wise::before {
104
+ content: "\e95f";
105
+ }
106
+ .e-image-editor .e-rectangle::before {
107
+ content: "\e670";
108
+ }
109
+ .e-image-editor .e-circle::before {
110
+ content: "\e671";
111
+ }
112
+ .e-image-editor .e-triangle::before {
113
+ content: "\e954";
114
+ }
115
+ .e-image-editor .e-line::before {
116
+ content: "\e668";
117
+ }
118
+ .e-image-editor .e-add-text::before {
119
+ content: "\e795";
120
+ }
121
+ .e-image-editor .e-free-pen::before {
122
+ content: "\e844";
123
+ }
124
+ .e-image-editor .e-arrow::before {
125
+ content: "\e669";
126
+ }
127
+ .e-image-editor .e-path::before {
128
+ content: "\e931";
129
+ }
70
130
 
71
131
  .e-dropdown-popup.e-image-popup .e-custom::before {
72
132
  content: "\e964";
@@ -122,6 +182,12 @@
122
182
  .e-dropdown-popup.e-image-popup .e-anti-clock-wise::before {
123
183
  content: "\e95f";
124
184
  }
185
+ .e-dropdown-popup.e-image-popup .e-arrow::before {
186
+ content: "\e669";
187
+ }
188
+ .e-dropdown-popup.e-image-popup .e-path::before {
189
+ content: "\e931";
190
+ }
125
191
 
126
192
  .e-ie-toolbar-upload-div.e-hide,
127
193
  .e-ie-toolbar-upload-btn.e-hide {
@@ -250,11 +316,11 @@
250
316
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
251
317
  height: auto !important; /* stylelint-disable-line declaration-no-important */
252
318
  }
253
- .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
319
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
254
320
  border: 2px solid transparent;
255
321
  height: 100px;
256
322
  }
257
- .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 {
323
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
258
324
  border-top: 2px solid;
259
325
  }
260
326
  .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
@@ -270,7 +336,7 @@
270
336
  border-top: 1px solid #dee2e6;
271
337
  border-bottom: 1px solid #dee2e6;
272
338
  }
273
- .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 {
339
+ .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, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
274
340
  border-color: #545b62;
275
341
  }
276
342
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
package/styles/image-editor/bootstrap5-dark.css CHANGED
@@ -75,6 +75,66 @@
75
75
  .e-image-editor .e-fill.e-template .e-caret::before {
76
76
  content: "\e783";
77
77
  }
78
+ .e-image-editor .e-custom::before {
79
+ content: "\e8a9";
80
+ }
81
+ .e-image-editor .e-circle::before {
82
+ content: "\e7ca";
83
+ }
84
+ .e-image-editor .e-square::before {
85
+ content: "\e8aa";
86
+ }
87
+ .e-image-editor .e-custom-a::before {
88
+ content: "\e8ab";
89
+ }
90
+ .e-image-editor .e-custom-b::before {
91
+ content: "\e8ac";
92
+ }
93
+ .e-image-editor .e-custom-c::before {
94
+ content: "\e8ad";
95
+ }
96
+ .e-image-editor .e-custom-d::before {
97
+ content: "\e8ae";
98
+ }
99
+ .e-image-editor .e-custom-e::before {
100
+ content: "\e8af";
101
+ }
102
+ .e-image-editor .e-horizontal-flip::before {
103
+ content: "\e8a3";
104
+ }
105
+ .e-image-editor .e-vertical-flip::before {
106
+ content: "\e8a4";
107
+ }
108
+ .e-image-editor .e-clock-wise::before {
109
+ content: "\e8a6";
110
+ }
111
+ .e-image-editor .e-anti-clock-wise::before {
112
+ content: "\e8a5";
113
+ }
114
+ .e-image-editor .e-rectangle::before {
115
+ content: "\e723";
116
+ }
117
+ .e-image-editor .e-circle::before {
118
+ content: "\e7ca";
119
+ }
120
+ .e-image-editor .e-triangle::before {
121
+ content: "\e89c";
122
+ }
123
+ .e-image-editor .e-line::before {
124
+ content: "\e819";
125
+ }
126
+ .e-image-editor .e-add-text::before {
127
+ content: "\e82e";
128
+ }
129
+ .e-image-editor .e-free-pen::before {
130
+ content: "\e7db";
131
+ }
132
+ .e-image-editor .e-arrow::before {
133
+ content: "\e669";
134
+ }
135
+ .e-image-editor .e-path::before {
136
+ content: "\e931";
137
+ }
78
138
 
79
139
  .e-dropdown-popup.e-image-popup .e-custom::before {
80
140
  content: "\e8a9";
@@ -133,6 +193,12 @@
133
193
  .e-dropdown-popup.e-image-popup .e-add-text::before {
134
194
  content: "\e82e";
135
195
  }
196
+ .e-dropdown-popup.e-image-popup .e-arrow::before {
197
+ content: "\e669";
198
+ }
199
+ .e-dropdown-popup.e-image-popup .e-path::before {
200
+ content: "\e931";
201
+ }
136
202
 
137
203
  .e-ie-toolbar-upload-div.e-hide,
138
204
  .e-ie-toolbar-upload-btn.e-hide {
@@ -268,11 +334,11 @@
268
334
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
269
335
  height: auto !important; /* stylelint-disable-line declaration-no-important */
270
336
  }
271
- .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
337
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
272
338
  border: 2px solid transparent;
273
339
  height: 100px;
274
340
  }
275
- .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 {
341
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
276
342
  border-top: 2px solid;
277
343
  }
278
344
  .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
@@ -288,7 +354,7 @@
288
354
  border-top: 1px solid #343a40;
289
355
  border-bottom: 1px solid #343a40;
290
356
  }
291
- .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 {
357
+ .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, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
292
358
  border-color: #565e64;
293
359
  }
294
360
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
package/styles/image-editor/bootstrap5.css CHANGED
@@ -75,6 +75,66 @@
75
75
  .e-image-editor .e-fill.e-template .e-caret::before {
76
76
  content: "\e783";
77
77
  }
78
+ .e-image-editor .e-custom::before {
79
+ content: "\e8a9";
80
+ }
81
+ .e-image-editor .e-circle::before {
82
+ content: "\e7ca";
83
+ }
84
+ .e-image-editor .e-square::before {
85
+ content: "\e8aa";
86
+ }
87
+ .e-image-editor .e-custom-a::before {
88
+ content: "\e8ab";
89
+ }
90
+ .e-image-editor .e-custom-b::before {
91
+ content: "\e8ac";
92
+ }
93
+ .e-image-editor .e-custom-c::before {
94
+ content: "\e8ad";
95
+ }
96
+ .e-image-editor .e-custom-d::before {
97
+ content: "\e8ae";
98
+ }
99
+ .e-image-editor .e-custom-e::before {
100
+ content: "\e8af";
101
+ }
102
+ .e-image-editor .e-horizontal-flip::before {
103
+ content: "\e8a3";
104
+ }
105
+ .e-image-editor .e-vertical-flip::before {
106
+ content: "\e8a4";
107
+ }
108
+ .e-image-editor .e-clock-wise::before {
109
+ content: "\e8a6";
110
+ }
111
+ .e-image-editor .e-anti-clock-wise::before {
112
+ content: "\e8a5";
113
+ }
114
+ .e-image-editor .e-rectangle::before {
115
+ content: "\e723";
116
+ }
117
+ .e-image-editor .e-circle::before {
118
+ content: "\e7ca";
119
+ }
120
+ .e-image-editor .e-triangle::before {
121
+ content: "\e89c";
122
+ }
123
+ .e-image-editor .e-line::before {
124
+ content: "\e819";
125
+ }
126
+ .e-image-editor .e-add-text::before {
127
+ content: "\e82e";
128
+ }
129
+ .e-image-editor .e-free-pen::before {
130
+ content: "\e7db";
131
+ }
132
+ .e-image-editor .e-arrow::before {
133
+ content: "\e669";
134
+ }
135
+ .e-image-editor .e-path::before {
136
+ content: "\e931";
137
+ }
78
138
 
79
139
  .e-dropdown-popup.e-image-popup .e-custom::before {
80
140
  content: "\e8a9";
@@ -133,6 +193,12 @@
133
193
  .e-dropdown-popup.e-image-popup .e-add-text::before {
134
194
  content: "\e82e";
135
195
  }
196
+ .e-dropdown-popup.e-image-popup .e-arrow::before {
197
+ content: "\e669";
198
+ }
199
+ .e-dropdown-popup.e-image-popup .e-path::before {
200
+ content: "\e931";
201
+ }
136
202
 
137
203
  .e-ie-toolbar-upload-div.e-hide,
138
204
  .e-ie-toolbar-upload-btn.e-hide {
@@ -268,11 +334,11 @@
268
334
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
269
335
  height: auto !important; /* stylelint-disable-line declaration-no-important */
270
336
  }
271
- .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
337
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
272
338
  border: 2px solid transparent;
273
339
  height: 100px;
274
340
  }
275
- .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 {
341
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
276
342
  border-top: 2px solid;
277
343
  }
278
344
  .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
@@ -288,7 +354,7 @@
288
354
  border-top: 1px solid #e9ecef;
289
355
  border-bottom: 1px solid #e9ecef;
290
356
  }
291
- .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 {
357
+ .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, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
292
358
  border-color: #565e64;
293
359
  }
294
360
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
package/styles/image-editor/fabric-dark.css CHANGED
@@ -67,6 +67,66 @@
67
67
  .e-image-editor .e-fill.e-template .e-caret::before {
68
68
  content: "\e35c";
69
69
  }
70
+ .e-image-editor .e-custom::before {
71
+ content: "\e959";
72
+ }
73
+ .e-image-editor .e-circle::before {
74
+ content: "\e671";
75
+ }
76
+ .e-image-editor .e-square::before {
77
+ content: "\e95a";
78
+ }
79
+ .e-image-editor .e-custom-a::before {
80
+ content: "\e95b";
81
+ }
82
+ .e-image-editor .e-custom-b::before {
83
+ content: "\e95c";
84
+ }
85
+ .e-image-editor .e-custom-c::before {
86
+ content: "\e95d";
87
+ }
88
+ .e-image-editor .e-custom-d::before {
89
+ content: "\e95e";
90
+ }
91
+ .e-image-editor .e-custom-e::before {
92
+ content: "\e960";
93
+ }
94
+ .e-image-editor .e-horizontal-flip::before {
95
+ content: "\e951";
96
+ }
97
+ .e-image-editor .e-vertical-flip::before {
98
+ content: "\e952";
99
+ }
100
+ .e-image-editor .e-clock-wise::before {
101
+ content: "\e956";
102
+ }
103
+ .e-image-editor .e-anti-clock-wise::before {
104
+ content: "\e955";
105
+ }
106
+ .e-image-editor .e-rectangle::before {
107
+ content: "\e670";
108
+ }
109
+ .e-image-editor .e-circle::before {
110
+ content: "\e671";
111
+ }
112
+ .e-image-editor .e-triangle::before {
113
+ content: "\e949";
114
+ }
115
+ .e-image-editor .e-line::before {
116
+ content: "\e668";
117
+ }
118
+ .e-image-editor .e-add-text::before {
119
+ content: "\e35b";
120
+ }
121
+ .e-image-editor .e-free-pen::before {
122
+ content: "\e739";
123
+ }
124
+ .e-image-editor .e-arrow::before {
125
+ content: "\e669";
126
+ }
127
+ .e-image-editor .e-path::before {
128
+ content: "\e931";
129
+ }
70
130
 
71
131
  .e-dropdown-popup.e-image-popup .e-custom::before {
72
132
  content: "\e959";
@@ -122,6 +182,12 @@
122
182
  .e-dropdown-popup.e-image-popup .e-vertical-flip::before {
123
183
  content: "\e952";
124
184
  }
185
+ .e-dropdown-popup.e-image-popup .e-arrow::before {
186
+ content: "\e669";
187
+ }
188
+ .e-dropdown-popup.e-image-popup .e-path::before {
189
+ content: "\e931";
190
+ }
125
191
 
126
192
  .e-ie-toolbar-upload-div.e-hide,
127
193
  .e-ie-toolbar-upload-btn.e-hide {
@@ -252,11 +318,11 @@
252
318
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
253
319
  height: auto !important; /* stylelint-disable-line declaration-no-important */
254
320
  }
255
- .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
321
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
256
322
  border: 2px solid transparent;
257
323
  height: 100px;
258
324
  }
259
- .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 {
325
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
260
326
  border-top: 2px solid;
261
327
  }
262
328
  .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
@@ -272,7 +338,7 @@
272
338
  border-top: 1px solid #414040;
273
339
  border-bottom: 1px solid #414040;
274
340
  }
275
- .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 {
341
+ .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, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
276
342
  border-color: #6f6c6c;
277
343
  }
278
344
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {