@syncfusion/ej2-vue-diagrams 19.2.60 → 19.3.45

package/styles/diagram/highcontrast-light.css

@@ -249,6 +249,18 @@
   stroke: #fff;
 }
 
+.e-diagram-bezier-handle.e-source.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-diagram-bezier-handle.e-target.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-symbolpalette .e-acrdn-content {
+  background-color: #fff !important;
+}
+
 .e-diagram-bezier-handle {
   fill: #005a9e;
   stroke: #fff;
@@ -263,6 +275,10 @@
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #005a9e;
+}
+
 .e-diagram-resize-handle.e-disabled {
   fill: #a6a6a6;
   opacity: 1;
@@ -307,13 +323,13 @@
 }
 
 .e-symbolpalette .e-symbol-hover:hover {
-  background: #eaeaea;
-  border-radius: 0px;
+  background: #685708;
+  border-radius: 4px;
 }
 
 .e-symbolpalette .e-symbol-selected {
   background: #c7e0f4;
-  border-radius: 0px;
+  border-radius: 4px;
 }
 
 .e-diagram-tooltip {

package/styles/diagram/highcontrast.css

@@ -234,57 +234,74 @@
 }
 
 .e-diagram-endpoint-handle {
-  fill: #0078d7;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #ffd939;
 }
 
 .e-diagram-endpoint-handle.e-connected {
-  fill: #fff;
-  stroke: #0078d7;
+  fill: #ffd939;
+  stroke: #fff;
 }
 
 .e-diagram-endpoint-handle.e-disabled {
-  fill: #a6a6a6;
+  fill: #757575;
   opacity: 1;
-  stroke: #fff;
+  stroke: #757575;
+}
+
+.e-diagram-bezier-handle.e-source.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-diagram-bezier-handle.e-target.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-symbolpalette .e-acrdn-content {
+  background-color: #cccccc !important;
 }
 
 .e-diagram-bezier-handle {
-  fill: #005a9e;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #ffd939;
 }
 
 .e-diagram-bezier-line {
-  stroke: #005a9e;
+  stroke: #ffd939;
 }
 
 .e-diagram-resize-handle {
-  fill: #0078d7;
+  fill: #ffd939;
+  stroke: #ffd939;
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #ffd939;
+}
+
 .e-diagram-resize-handle.e-disabled {
-  fill: #a6a6a6;
+  fill: #757575;
   opacity: 1;
-  stroke: #fff;
+  stroke: #757575;
 }
 
 .e-diagram-rotate-handle {
-  fill: #000;
-  stroke: #fff;
+  fill: #ffd939;
+  stroke: #ffd939;
 }
 
 .e-diagram-border {
-  stroke: #005a9e;
+  stroke: #ffd939;
 }
 
 .e-diagram-border.e-disabled {
   opacity: 1;
-  stroke: #a6a6a6;
+  stroke: #757575;
 }
 
 .e-diagram-border.e-thick-border {
-  stroke: #005a9e;
+  stroke: #ffd939;
   stroke-width: 2;
 }
 
@@ -294,25 +311,25 @@
 }
 
 .e-diagram-highlighter {
-  stroke: #005a9e;
+  stroke: #ffd939;
   stroke-width: 2;
 }
 
 .e-diagram-selected-region {
-  stroke: #0078d7;
+  stroke: #ffd939;
 }
 
 .e-diagram-pivot-line {
-  stroke: #0078d7;
+  stroke: #ffd939;
 }
 
 .e-symbolpalette .e-symbol-hover:hover {
-  background: #eaeaea;
+  background: #000;
   border-radius: 0px;
 }
 
 .e-symbolpalette .e-symbol-selected {
-  background: #c7e0f4;
+  background: #ffd939;
   border-radius: 0px;
 }
 
@@ -321,22 +338,22 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #fff;
-  color: #a6a6a6;
+  background-color: #000;
+  color: #ffd939;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #fff;
+  background-color: #000;
 }
 
 .e-diagram .e-d-ruler-marker {
-  stroke: #0078d7;
+  stroke: #ffd939;
 }
 
 .e-diagram .e-diagram-text-edit {
   background: #fff;
-  border-color: #005a9e;
+  border-color: #ffd939;
   border-style: dashed;
   border-width: 1px;
   box-sizing: content-box;
@@ -345,16 +362,16 @@
 }
 
 .e-diagram-text-edit::selection {
-  background: #0078d7;
-  color: #fff;
+  background: #ffd939;
+  color: #000;
 }
 
 .e-ruler-tick-label {
-  fill: #a6a6a6;
+  fill: #fff;
 }
 
 .e-ruler-tick {
-  stroke: #767676;
+  stroke: #fff;
 }
 
 .e-menu-item e-blankicon {

package/styles/diagram/material-dark.css

@@ -210,7 +210,7 @@
 }
 
 .e-diagram {
-  background-color: transparent;
+  background-color: #fff;
   display: block;
 }
 
@@ -235,48 +235,65 @@
 }
 
 .e-diagram-endpoint-handle {
-  fill: #ff80ab;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #00b0ff;
 }
 
 .e-diagram-endpoint-handle.e-connected {
-  fill: #fff;
-  stroke: #ff80ab;
+  fill: #00b0ff;
+  stroke: #fff;
 }
 
 .e-diagram-endpoint-handle.e-disabled {
-  fill: #9e9e9e;
+  fill: #bdbdbd;
   opacity: 1;
-  stroke: #000;
+  stroke: #fff;
+}
+
+.e-diagram-bezier-handle.e-source.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-diagram-bezier-handle.e-target.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-symbolpalette .e-acrdn-content {
+  background-color: #e0e0e0 !important;
 }
 
 .e-diagram-bezier-handle {
-  fill: #ff80ab;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #00b0ff;
 }
 
 .e-diagram-bezier-line {
-  stroke: #ff80ab;
+  stroke: #00b0ff;
 }
 
 .e-diagram-resize-handle {
-  fill: #ff80ab;
+  fill: #00b0ff;
+  stroke: #00b0ff;
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #00b0ff;
+}
+
 .e-diagram-resize-handle.e-disabled {
-  fill: #9e9e9e;
+  fill: #bdbdbd;
   opacity: 1;
-  stroke: #000;
+  stroke: #fff;
 }
 
 .e-diagram-rotate-handle {
-  fill: #000;
-  stroke: #fff;
+  fill: #00b0ff;
+  stroke: #00b0ff;
 }
 
 .e-diagram-border {
-  stroke: #ff80ab;
+  stroke: #00b0ff;
 }
 
 .e-diagram-border.e-disabled {
@@ -285,36 +302,36 @@
 }
 
 .e-diagram-border.e-thick-border {
-  stroke: #ff80ab;
+  stroke: #3f51b5;
   stroke-width: 2;
 }
 
 .e-diagram-border.e-thick-border.e-diagram-lane {
-  stroke: #0078ff;
+  stroke: #3f51b5;
   stroke-width: 2;
 }
 
 .e-diagram-highlighter {
-  stroke: #ff80ab;
+  stroke: #00b0ff;
   stroke-width: 2;
 }
 
 .e-diagram-selected-region {
-  stroke: #3f51b5;
+  stroke: #00b0ff;
 }
 
 .e-diagram-pivot-line {
-  stroke: #ff80ab;
+  stroke: #00b0ff;
 }
 
 .e-symbolpalette .e-symbol-hover:hover {
-  background: #eee;
-  border-radius: 0px;
+  background: #bdbdbd;
+  border-radius: 4px;
 }
 
 .e-symbolpalette .e-symbol-selected {
-  background: #e0e0e0;
-  border-radius: 0px;
+  background: #616161;
+  border-radius: 4px;
 }
 
 .e-diagram-tooltip {
@@ -322,22 +339,22 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #fff;
-  color: #757575;
+  background-color: #424242;
+  color: #f5f5f5;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #fff;
+  background-color: #424242;
 }
 
 .e-diagram .e-d-ruler-marker {
-  stroke: #ff80ab;
+  stroke: #00b0ff;
 }
 
 .e-diagram .e-diagram-text-edit {
   background: #fff;
-  border-color: #ff80ab;
+  border-color: #00b0ff;
   border-style: dashed;
   border-width: 1px;
   box-sizing: content-box;
@@ -346,16 +363,16 @@
 }
 
 .e-diagram-text-edit::selection {
-  background: #ff80ab;
+  background: #00b0ff;
   color: #fff;
 }
 
 .e-ruler-tick-label {
-  fill: #616161;
+  fill: #bdbdbd;
 }
 
 .e-ruler-tick {
-  stroke: #757575;
+  stroke: #9e9e9e;
 }
 
 .e-menu-item e-blankicon {

package/styles/diagram/material.css

@@ -210,7 +210,7 @@
 }
 
 .e-diagram {
-  background-color: transparent;
+  background-color: #fff;
   display: block;
 }
 
@@ -235,24 +235,36 @@
 }
 
 .e-diagram-endpoint-handle {
-  fill: #e3165b;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #e3165b;
 }
 
 .e-diagram-endpoint-handle.e-connected {
-  fill: #fff;
-  stroke: #e3165b;
+  fill: #e3165b;
+  stroke: #fff;
 }
 
 .e-diagram-endpoint-handle.e-disabled {
-  fill: #9e9e9e;
+  fill: #bdbdbd;
   opacity: 1;
   stroke: #fff;
 }
 
+.e-diagram-bezier-handle.e-source.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-diagram-bezier-handle.e-target.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-symbolpalette .e-acrdn-content {
+  background-color: #fff !important;
+}
+
 .e-diagram-bezier-handle {
-  fill: #e3165b;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #e3165b;
 }
 
 .e-diagram-bezier-line {
@@ -261,18 +273,23 @@
 
 .e-diagram-resize-handle {
   fill: #e3165b;
+  stroke: #e3165b;
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #e3165b;
+}
+
 .e-diagram-resize-handle.e-disabled {
-  fill: #9e9e9e;
+  fill: #bdbdbd;
   opacity: 1;
   stroke: #fff;
 }
 
 .e-diagram-rotate-handle {
-  fill: #000;
-  stroke: #fff;
+  fill: #e3165b;
+  stroke: #e3165b;
 }
 
 .e-diagram-border {
@@ -285,12 +302,12 @@
 }
 
 .e-diagram-border.e-thick-border {
-  stroke: #e3165b;
+  stroke: #3f51b5;
   stroke-width: 2;
 }
 
 .e-diagram-border.e-thick-border.e-diagram-lane {
-  stroke: #0078ff;
+  stroke: #3f51b5;
   stroke-width: 2;
 }
 
@@ -300,7 +317,7 @@
 }
 
 .e-diagram-selected-region {
-  stroke: #3f51b5;
+  stroke: #e3165b;
 }
 
 .e-diagram-pivot-line {
@@ -309,12 +326,12 @@
 
 .e-symbolpalette .e-symbol-hover:hover {
   background: #eee;
-  border-radius: 0px;
+  border-radius: 4px;
 }
 
 .e-symbolpalette .e-symbol-selected {
-  background: #e0e0e0;
-  border-radius: 0px;
+  background: #bdbdbd;
+  border-radius: 4px;
 }
 
 .e-diagram-tooltip {
@@ -322,13 +339,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #fff;
-  color: #757575;
+  background-color: #f5f5f5;
+  color: #f5f5f5;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #fff;
+  background-color: #f5f5f5;
 }
 
 .e-diagram .e-d-ruler-marker {
@@ -355,7 +372,7 @@
 }
 
 .e-ruler-tick {
-  stroke: #757575;
+  stroke: #bdbdbd;
 }
 
 .e-menu-item e-blankicon {

package/styles/diagram/tailwind-dark.css

@@ -130,7 +130,7 @@
 }
 
 .e-diagram-menu .e-delete::before {
-  content: '\e78d';
+  content: '\e844';
 }
 
 .e-diagram-menu .e-ungroup::before {
@@ -145,6 +145,14 @@
   content: '\e7bd';
 }
 
+.e-diagram-menu .e-redo::before {
+  content: '\e7b9';
+}
+
+.e-diagram-menu .e-copy::before {
+  content: '\e7ce';
+}
+
 .e-diagram-menu .e-cut::before {
   content: '\e763';
 }
@@ -157,14 +165,6 @@
   content: '\e75e';
 }
 
-.e-diagram-menu .e-copy::before {
-  content: '\e7ce';
-}
-
-.e-diagram-menu .e-redo::before {
-  content: '\e7b9';
-}
-
 .e-diagram-menu .e-zoomin::before {
   content: '\e70a';
 }
@@ -206,7 +206,7 @@
 }
 
 .e-symbolpalette .e-clear-searchtext::before {
-  content: '\e771';
+  content: '\e737';
 }
 
 .e-diagram {
@@ -250,6 +250,18 @@
   stroke: #fff;
 }
 
+.e-diagram-bezier-handle.e-source.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-diagram-bezier-handle.e-target.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-symbolpalette .e-acrdn-content {
+  background-color: #d1d5db !important;
+}
+
 .e-diagram-bezier-handle {
   fill: #fff;
   stroke: #22d3ee;
@@ -265,6 +277,10 @@
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #22d3ee;
+}
+
 .e-diagram-resize-handle.e-disabled {
   fill: #9ca3af;
   opacity: 1;
@@ -272,7 +288,7 @@
 }
 
 .e-diagram-rotate-handle {
-  fill: #d1d5db;
+  fill: #22d3ee;
   stroke: #22d3ee;
 }
 
@@ -282,7 +298,7 @@
 
 .e-diagram-border.e-disabled {
   opacity: 1;
-  stroke: #22d3ee;
+  stroke: #9ca3af;
 }
 
 .e-diagram-border.e-thick-border {
@@ -309,12 +325,12 @@
 }
 
 .e-symbolpalette .e-symbol-hover:hover {
-  background: #4b5563;
+  background: #9ca3af;
   border-radius: 0px;
 }
 
 .e-symbolpalette .e-symbol-selected {
-  background: #6b7280;
+  background: #4b5563;
   border-radius: 0px;
 }
 
@@ -337,12 +353,12 @@
 }
 
 .e-diagram .e-diagram-text-edit {
-  background: #000;
+  background: #fff;
   border-color: #22d3ee;
   border-style: dashed;
   border-width: 1px;
   box-sizing: content-box;
-  color: #fff;
+  color: #000;
   min-width: 50px;
 }
 
@@ -356,7 +372,7 @@
 }
 
 .e-ruler-tick {
-  stroke: #4b5563;
+  stroke: #6b7280;
 }
 
 .e-menu-item e-blankicon {