@syncfusion/ej2-angular-diagrams 19.2.59 → 19.3.44

package/styles/bootstrap5.css

@@ -0,0 +1,396 @@
+.e-icons {
+  font-family: 'e-icons';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+}
+
+.e-diagram-menu .e-bringforward::before {
+  content: '\e574';
+}
+
+.e-diagram-menu .e-bringfront::before {
+  content: '\e575';
+}
+
+.e-diagram-menu .e-sendback::before {
+  content: '\e576';
+}
+
+.e-diagram-menu .e-sendbackward::before {
+  content: '\e577';
+}
+
+.e-diagram-menu .e-delete::before {
+  content: '\e578';
+}
+
+.e-diagram-menu .e-ungroup::before {
+  content: '\e579';
+}
+
+.e-diagram-menu .e-group::before {
+  content: '\e57a';
+}
+
+.e-diagram-menu .e-undo::before {
+  content: '\e57c';
+}
+
+.e-diagram-menu .e-cut::before {
+  content: '\e57d';
+}
+
+.e-diagram-menu .e-save::before {
+  content: '\e57e';
+}
+
+.e-diagram-menu .e-paste::before {
+  content: '\e57f';
+}
+
+.e-diagram-menu .e-copy::before {
+  content: '\e580';
+}
+
+.e-diagram-menu .e-redo::before {
+  content: '\e581';
+}
+
+.e-diagram-menu .e-zoomin::before {
+  content: '\e582';
+}
+
+.e-diagram-menu .e-italic::before {
+  content: '\e583';
+}
+
+.e-diagram-menu .e-close::before {
+  content: '\e584';
+}
+
+.e-diagram-menu .e-pan::before {
+  content: '\e585';
+}
+
+.e-diagram-menu .e-bold::before {
+  content: '\e586';
+}
+
+.e-diagram-menu .e-underline::before {
+  content: '\e587';
+}
+
+.e-diagram-menu .e-zoomout::before {
+  content: '\e588';
+}
+
+.e-diagram-menu .e-export::before {
+  content: '\e589';
+}
+
+.e-diagram-menu .e-print::before {
+  content: '\e58a';
+}
+
+.e-diagram-menu .e-order::before {
+  content: '\e58b';
+}
+
+.e-symbolpalette .e-clear-searchtext::before {
+  content: '\e58c';
+}
+
+.e-icons {
+  font-family: 'e-icons';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+}
+
+.e-diagram-menu .e-bringforward::before {
+  content: '\e72f';
+}
+
+.e-diagram-menu .e-bringfront::before {
+  content: '\e840';
+}
+
+.e-diagram-menu .e-sendback::before {
+  content: '\e78a';
+}
+
+.e-diagram-menu .e-sendbackward::before {
+  content: '\e7ed';
+}
+
+.e-diagram-menu .e-delete::before {
+  content: '\e94a';
+}
+
+.e-diagram-menu .e-ungroup::before {
+  content: '\e749';
+}
+
+.e-diagram-menu .e-group::before {
+  content: '\e7f4';
+}
+
+.e-diagram-menu .e-undo::before {
+  content: '\e713';
+}
+
+.e-diagram-menu .e-redo::before {
+  content: '\e755';
+}
+
+.e-diagram-menu .e-copy::before {
+  content: '\e77c';
+}
+
+.e-diagram-menu .e-cut::before {
+  content: '\e7fb';
+}
+
+.e-diagram-menu .e-save::before {
+  content: '\e7c8';
+}
+
+.e-diagram-menu .e-paste::before {
+  content: '\e70b';
+}
+
+.e-diagram-menu .e-zoomin::before {
+  content: '\e795';
+}
+
+.e-diagram-menu .e-italic::before {
+  content: '\e75a';
+}
+
+.e-diagram-menu .e-close::before {
+  content: '\e7e7';
+}
+
+.e-diagram-menu .e-pan::before {
+  content: '\e7b1';
+}
+
+.e-diagram-menu .e-bold::before {
+  content: '\e737';
+}
+
+.e-diagram-menu .e-underline::before {
+  content: '\e82f';
+}
+
+.e-diagram-menu .e-zoomout::before {
+  content: '\e825';
+}
+
+.e-diagram-menu .e-export::before {
+  content: '\e72e';
+}
+
+.e-diagram-menu .e-print::before {
+  content: '\e75d';
+}
+
+.e-diagram-menu .e-order::before {
+  content: '\e809';
+}
+
+.e-symbolpalette .e-clear-searchtext::before {
+  content: '\e754';
+}
+
+.e-diagram {
+  background-color: #fff;
+  display: block;
+}
+
+.e-symbolpalette {
+  display: block;
+}
+
+.e-overview {
+  display: block;
+}
+
+.e-content-placeholder.e-diagram.e-placeholder-diagram {
+  background-size: 100% 100%;
+  max-height: 500px;
+  max-width: 500px;
+}
+
+.e-content-placeholder.e-symbolpalette.e-placeholder-symbolpalette {
+  background-size: 100% 100%;
+  max-height: 200px;
+  max-width: 200px;
+}
+
+.e-diagram-endpoint-handle {
+  fill: #fff;
+  stroke: #0d6efd;
+}
+
+.e-diagram-endpoint-handle.e-connected {
+  fill: #0d6efd;
+  stroke: #fff;
+}
+
+.e-diagram-endpoint-handle.e-disabled {
+  fill: #adb5bd;
+  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: #fff;
+  stroke: #0d6efd;
+}
+
+.e-diagram-bezier-line {
+  stroke: #0d6efd;
+}
+
+.e-diagram-resize-handle {
+  fill: #0d6efd;
+  stroke: #0d6efd;
+  stroke: #fff;
+}
+
+.e-diagram-helper {
+  stroke: #0d6efd;
+}
+
+.e-diagram-resize-handle.e-disabled {
+  fill: #adb5bd;
+  opacity: 1;
+  stroke: #fff;
+}
+
+.e-diagram-rotate-handle {
+  fill: #0d6efd;
+  stroke: #0d6efd;
+}
+
+.e-diagram-border {
+  stroke: #0d6efd;
+}
+
+.e-diagram-border.e-disabled {
+  opacity: 1;
+  stroke: #adb5bd;
+}
+
+.e-diagram-border.e-thick-border {
+  stroke: #0d6efd;
+  stroke-width: 2;
+}
+
+.e-diagram-border.e-thick-border.e-diagram-lane {
+  stroke: #0d6efd;
+  stroke-width: 2;
+}
+
+.e-diagram-highlighter {
+  stroke: #0d6efd;
+  stroke-width: 2;
+}
+
+.e-diagram-selected-region {
+  stroke: #0d6efd;
+}
+
+.e-diagram-pivot-line {
+  stroke: #0d6efd;
+}
+
+.e-symbolpalette .e-symbol-hover:hover {
+  background: #e9ecef;
+  border-radius: 0px;
+}
+
+.e-symbolpalette .e-symbol-selected {
+  background: #dee2e6;
+  border-radius: 0px;
+}
+
+.e-diagram-tooltip {
+  pointer-events: none;
+}
+
+.e-diagram .e-ruler {
+  background-color: #f8f9fa;
+  color: #495057;
+  font-size: 10px;
+}
+
+.e-diagram .e-ruler-overlap {
+  background-color: #f8f9fa;
+}
+
+.e-diagram .e-d-ruler-marker {
+  stroke: #0d6efd;
+}
+
+.e-diagram .e-diagram-text-edit {
+  background: #fff;
+  border-color: #0d6efd;
+  border-style: dashed;
+  border-width: 1px;
+  box-sizing: content-box;
+  color: #000;
+  min-width: 50px;
+}
+
+.e-diagram-text-edit::selection {
+  background: #0d6efd;
+  color: #fff;
+}
+
+.e-ruler-tick-label {
+  fill: #495057;
+}
+
+.e-ruler-tick {
+  stroke: #ced4da;
+}
+
+.e-menu-item e-blankicon {
+  padding-left: 28px;
+}
+
+.e-diagram-rotate {
+  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAA60lEQVQ4jZ1SwQ2DMBAzlfLJI2KEjJAVukG7ARsxQkfoKHQDugHdgOoqh14oCaGWIpSTudzZRg2MdYOxrq0il2Csm411o7Eu5GinTN0D6AGMAGZVux9p1LGBrHIF0LD+4l3ql70thDABSFZYaeTJ6UqNWhL3ELhyyhUR98TcwI06Lk1aNonO1NocqGWy/6zOcGCq6OjiSCw22/wUfEzL8ND2P9duFXBmHMDvWVN7CliFkkGe69VM5RmVLDqG7ZMPOroWP5BTle5WjR6dkQayutyLqU6gsiU/ypHMiI41yf+CE01qov+R0egXAN5x6jng51I3yAAAAABJRU5ErkJggg==), auto !important;
+}
+
+.e-symbolpalette-hidden {
+  display: none !important;
+}
+
+.e-symbolpalette-search-hidden {
+  display: none !important;
+}
+
+.e-diagramTooltip-content {
+  width: auto !important;
+  height: auto !important;
+}

package/styles/bootstrap5.scss

@@ -0,0 +1 @@
+@import 'diagram/bootstrap5.scss';

package/styles/diagram/bootstrap-dark.css

@@ -209,7 +209,7 @@
 }
 
 .e-diagram {
-  background-color: transparent;
+  background-color: #fff;
   display: block;
 }
 
@@ -234,44 +234,61 @@
 }
 
 .e-diagram-endpoint-handle {
-  fill: #0070f0;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #0070f0;
 }
 
 .e-diagram-endpoint-handle.e-connected {
-  fill: #fff;
-  stroke: #0070f0;
+  fill: #0070f0;
+  stroke: #fff;
 }
 
 .e-diagram-endpoint-handle.e-disabled {
-  fill: #676767;
+  fill: #acacac;
   opacity: 1;
-  stroke: #f0f0f0;
+  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: #dfdfdf !important;
 }
 
 .e-diagram-bezier-handle {
-  fill: #0070f0;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #0070f0;
 }
 
 .e-diagram-bezier-line {
-  stroke: #0058bd;
+  stroke: #0070f0;
 }
 
 .e-diagram-resize-handle {
   fill: #0070f0;
+  stroke: #0070f0;
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #0070f0;
+}
+
 .e-diagram-resize-handle.e-disabled {
-  fill: #676767;
+  fill: #acacac;
   opacity: 1;
-  stroke: #f0f0f0;
+  stroke: #fff;
 }
 
 .e-diagram-rotate-handle {
-  fill: #000;
-  stroke: #fff;
+  fill: #0070f0;
+  stroke: #0070f0;
 }
 
 .e-diagram-border {
@@ -280,7 +297,7 @@
 
 .e-diagram-border.e-disabled {
   opacity: 1;
-  stroke: #676767;
+  stroke: #acacac;
 }
 
 .e-diagram-border.e-thick-border {
@@ -289,7 +306,7 @@
 }
 
 .e-diagram-border.e-thick-border.e-diagram-lane {
-  stroke: #0078ff;
+  stroke: #0070f0;
   stroke-width: 2;
 }
 
@@ -303,17 +320,17 @@
 }
 
 .e-diagram-pivot-line {
-  stroke: #fff;
+  stroke: #0070f0;
 }
 
 .e-symbolpalette .e-symbol-hover:hover {
-  background: #959595;
-  border-radius: 0px;
+  background: #b9b9b9;
+  border-radius: 4px;
 }
 
 .e-symbolpalette .e-symbol-selected {
-  background: #676767;
-  border-radius: 0px;
+  background: #acacac;
+  border-radius: 4px;
 }
 
 .e-diagram-tooltip {
@@ -321,13 +338,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #6e6e6e;
-  color: #585858;
+  background-color: #313131;
+  color: #f0f0f0;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #6e6e6e;
+  background-color: #313131;
 }
 
 .e-diagram .e-d-ruler-marker {
@@ -336,11 +353,11 @@
 
 .e-diagram .e-diagram-text-edit {
   background: #fff;
-  border-color: #0058bd;
+  border-color: #0070f0;
   border-style: dashed;
   border-width: 1px;
   box-sizing: content-box;
-  color: #000;
+  color: #1a1a1a;
   min-width: 50px;
 }
 
@@ -350,11 +367,11 @@
 }
 
 .e-ruler-tick-label {
-  fill: #585858;
+  fill: #c6c6c6;
 }
 
 .e-ruler-tick {
-  stroke: #676767;
+  stroke: #858585;
 }
 
 .e-menu-item e-blankicon {

package/styles/diagram/bootstrap.css

@@ -209,7 +209,7 @@
 }
 
 .e-diagram {
-  background-color: transparent;
+  background-color: #fff;
   display: block;
 }
 
@@ -234,44 +234,61 @@
 }
 
 .e-diagram-endpoint-handle {
-  fill: #317ab9;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #317ab9;
 }
 
 .e-diagram-endpoint-handle.e-connected {
-  fill: #fff;
-  stroke: #317ab9;
+  fill: #317ab9;
+  stroke: #fff;
 }
 
 .e-diagram-endpoint-handle.e-disabled {
-  fill: #adadad;
+  fill: #ccc;
   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: #317ab9;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #317ab9;
 }
 
 .e-diagram-bezier-line {
-  stroke: #3071a9;
+  stroke: #317ab9;
 }
 
 .e-diagram-resize-handle {
   fill: #317ab9;
+  stroke: #317ab9;
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #317ab9;
+}
+
 .e-diagram-resize-handle.e-disabled {
-  fill: #adadad;
+  fill: #ccc;
   opacity: 1;
   stroke: #fff;
 }
 
 .e-diagram-rotate-handle {
-  fill: #000;
-  stroke: #fff;
+  fill: #317ab9;
+  stroke: #317ab9;
 }
 
 .e-diagram-border {
@@ -280,7 +297,7 @@
 
 .e-diagram-border.e-disabled {
   opacity: 1;
-  stroke: #adadad;
+  stroke: #ccc;
 }
 
 .e-diagram-border.e-thick-border {
@@ -289,7 +306,7 @@
 }
 
 .e-diagram-border.e-thick-border.e-diagram-lane {
-  stroke: #0078ff;
+  stroke: #317ab9;
   stroke-width: 2;
 }
 
@@ -303,17 +320,17 @@
 }
 
 .e-diagram-pivot-line {
-  stroke: #fff;
+  stroke: #317ab9;
 }
 
 .e-symbolpalette .e-symbol-hover:hover {
-  background: #e6e6e6;
-  border-radius: 0px;
+  background: #f5f5f5;
+  border-radius: 4px;
 }
 
 .e-symbolpalette .e-symbol-selected {
-  background: #adadad;
-  border-radius: 0px;
+  background: #ccc;
+  border-radius: 4px;
 }
 
 .e-diagram-tooltip {
@@ -321,13 +338,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #fff;
+  background-color: #f8f8f8;
   color: #8c8c8c;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #fff;
+  background-color: #f8f8f8;
 }
 
 .e-diagram .e-d-ruler-marker {
@@ -336,7 +353,7 @@
 
 .e-diagram .e-diagram-text-edit {
   background: #fff;
-  border-color: #3071a9;
+  border-color: #317ab9;
   border-style: dashed;
   border-width: 1px;
   box-sizing: content-box;
@@ -345,16 +362,16 @@
 }
 
 .e-diagram-text-edit::selection {
-  background: #aaa;
+  background: #317ab9;
   color: #fff;
 }
 
 .e-ruler-tick-label {
-  fill: #8c8c8c;
+  fill: #444;
 }
 
 .e-ruler-tick {
-  stroke: #adadad;
+  stroke: #ddd;
 }
 
 .e-menu-item e-blankicon {