@syncfusion/ej2-angular-diagrams 21.2.9 → 22.1.34

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-angular-diagrams@*",
-  "_id": "@syncfusion/ej2-angular-diagrams@21.2.8",
+  "_id": "@syncfusion/ej2-angular-diagrams@20.1.60",
   "_inBundle": false,
-  "_integrity": "sha512-a9Zm4K3Q2gcqf+GpJaMt/stXCz7iHcrAMGmNzMcui0l/HkN1t3dMjaK/8+AJStRihVVQ2AsUeEzoS/XPqH0bjg==",
+  "_integrity": "sha512-NYzy9On6BC1N157TbfET8gp1xlq49EHoIEMWvjHwQysazxBofhhvyR9u9kwlpZVkUU2AHKUFZtUktmNpQyb1Ng==",
   "_location": "/@syncfusion/ej2-angular-diagrams",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-angular-hotfix/@syncfusion/ej2-angular-diagrams/-/ej2-angular-diagrams-21.2.8.tgz",
-  "_shasum": "820e1a8b3cbbb8c9041f3bb95b0c266e6a8914c5",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-angular-release/@syncfusion/ej2-angular-diagrams/-/ej2-angular-diagrams-20.1.60.tgz",
+  "_shasum": "2612df2fbcf1a785313d4ceb0c596dcad881b466",
   "_spec": "@syncfusion/ej2-angular-diagrams@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/ivypackages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-angular-base": "~21.2.3",
-    "@syncfusion/ej2-base": "~21.2.9",
-    "@syncfusion/ej2-diagrams": "21.2.9",
+    "@syncfusion/ej2-angular-base": "~22.1.34",
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-diagrams": "22.1.34",
     "tslib": "^2.3.0"
   },
   "deprecated": false,
@@ -57,6 +57,10 @@
   "fesm2020": "fesm2020/syncfusion-ej2-angular-diagrams.mjs",
   "homepage": "https://www.syncfusion.com/angular-components",
   "keywords": [
+    "ej2",
+    "Syncfusion",
+    "web-components",
+    "diagram",
     "angular",
     "ng",
     "ng-diagrams",
@@ -72,5 +76,5 @@
   "schematics": "./schematics/collection.json",
   "sideEffects": false,
   "typings": "syncfusion-ej2-angular-diagrams.d.ts",
-  "version": "21.2.9"
+  "version": "22.1.34"
 }

package/schematics/utils/lib-details.ts

@@ -1,4 +1,4 @@
 export const pkgName = '@syncfusion/ej2-angular-diagrams';
-export const pkgVer = '^21.2.9';
+export const pkgVer = '^20.1.60';
 export const moduleName = 'DiagramModule, SymbolPaletteModule, OverviewModule';
-export const themeVer = '~21.2.9';
+export const themeVer = '~20.1.60';

package/src/diagram/connectors.directive.d.ts

@@ -30,21 +30,10 @@ export declare class ConnectorDirective extends ComplexBase<ConnectorDirective>
      * @default undefined
      */
     addInfo: any;
-    /**
-     * Specifies a value indicating whether to overlap the connector over with the source and target node.
-     * If the LineRouting is enabled in the diagram, then allowNodeOverlap property will not work.
-     * @default false
-     */
-    allowNodeOverlap: any;
     /**
      *
      */
     annotations: any;
-    /**
-     * Sets the bezier settings of editing the segments.
-     * @default null
-     */
-    bezierSettings: any;
     /**
      * Defines the bridgeSpace of connector
      * @default 10
@@ -55,11 +44,6 @@ export declare class ConnectorDirective extends ComplexBase<ConnectorDirective>
      * @default 0
      */
     connectionPadding: any;
-    /**
-     * Sets the distance between source node and connector
-     * @default 13
-     */
-    connectorSpacing: any;
     /**
      * Defines the constraints of connector
      * * None - Interaction of the connectors cannot be done.
@@ -130,11 +114,6 @@ export declare class ConnectorDirective extends ComplexBase<ConnectorDirective>
      * @default {}
      */
     margin: any;
-    /**
-     * Sets the maximum segment thumb for the connector
-     * @default null
-     */
-    maxSegmentThumb: any;
     /**
      * Defines the size of the symbol preview
      * @aspdefaultvalueignore
@@ -238,7 +217,7 @@ export declare class ConnectorDirective extends ComplexBase<ConnectorDirective>
     zIndex: any;
     constructor(viewContainerRef: ViewContainerRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectorDirective, "e-connectors>e-connector", never, { "addInfo": "addInfo"; "allowNodeOverlap": "allowNodeOverlap"; "annotations": "annotations"; "bezierSettings": "bezierSettings"; "bridgeSpace": "bridgeSpace"; "connectionPadding": "connectionPadding"; "connectorSpacing": "connectorSpacing"; "constraints": "constraints"; "cornerRadius": "cornerRadius"; "dragSize": "dragSize"; "excludeFromLayout": "excludeFromLayout"; "fixedUserHandles": "fixedUserHandles"; "flip": "flip"; "flipMode": "flipMode"; "hitPadding": "hitPadding"; "id": "id"; "margin": "margin"; "maxSegmentThumb": "maxSegmentThumb"; "previewSize": "previewSize"; "segments": "segments"; "shape": "shape"; "sourceDecorator": "sourceDecorator"; "sourceID": "sourceID"; "sourcePadding": "sourcePadding"; "sourcePoint": "sourcePoint"; "sourcePortID": "sourcePortID"; "style": "style"; "symbolInfo": "symbolInfo"; "targetDecorator": "targetDecorator"; "targetID": "targetID"; "targetPadding": "targetPadding"; "targetPoint": "targetPoint"; "targetPortID": "targetPortID"; "tooltip": "tooltip"; "type": "type"; "visible": "visible"; "wrapper": "wrapper"; "zIndex": "zIndex"; }, {}, ["childFixedUserHandles", "childAnnotations"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectorDirective, "e-connectors>e-connector", never, { "addInfo": "addInfo"; "annotations": "annotations"; "bridgeSpace": "bridgeSpace"; "connectionPadding": "connectionPadding"; "constraints": "constraints"; "cornerRadius": "cornerRadius"; "dragSize": "dragSize"; "excludeFromLayout": "excludeFromLayout"; "fixedUserHandles": "fixedUserHandles"; "flip": "flip"; "flipMode": "flipMode"; "hitPadding": "hitPadding"; "id": "id"; "margin": "margin"; "previewSize": "previewSize"; "segments": "segments"; "shape": "shape"; "sourceDecorator": "sourceDecorator"; "sourceID": "sourceID"; "sourcePadding": "sourcePadding"; "sourcePoint": "sourcePoint"; "sourcePortID": "sourcePortID"; "style": "style"; "symbolInfo": "symbolInfo"; "targetDecorator": "targetDecorator"; "targetID": "targetID"; "targetPadding": "targetPadding"; "targetPoint": "targetPoint"; "targetPortID": "targetPortID"; "tooltip": "tooltip"; "type": "type"; "visible": "visible"; "wrapper": "wrapper"; "zIndex": "zIndex"; }, {}, ["childFixedUserHandles", "childAnnotations"]>;
 }
 /**
  * Connector Array Directive

package/src/diagram/diagram.component.d.ts

@@ -46,7 +46,6 @@ export declare class DiagramComponent extends Diagram implements IComponentBase
     mouseEnter: any;
     mouseLeave: any;
     mouseOver: any;
-    mouseWheel: any;
     onImageLoad: any;
     onUserHandleMouseDown: any;
     onUserHandleMouseEnter: any;
@@ -56,14 +55,12 @@ export declare class DiagramComponent extends Diagram implements IComponentBase
     propertyChange: any;
     rotateChange: any;
     scrollChange: any;
-    segmentChange: any;
     segmentCollectionChange: any;
     selectionChange: any;
     sizeChange: any;
     sourcePointChange: any;
     targetPointChange: any;
     textEdit: any;
-    elementDraw: any;
     childLayers: QueryList<LayersDirective>;
     childCustomCursor: QueryList<CustomCursorsDirective>;
     childConnectors: QueryList<ConnectorsDirective>;
@@ -92,5 +89,5 @@ export declare class DiagramComponent extends Diagram implements IComponentBase
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "ejs-diagram", never, { "addInfo": "addInfo"; "annotationTemplate": "annotationTemplate"; "backgroundColor": "backgroundColor"; "bridgeDirection": "bridgeDirection"; "commandManager": "commandManager"; "connectorDefaults": "connectorDefaults"; "connectors": "connectors"; "constraints": "constraints"; "contextMenuSettings": "contextMenuSettings"; "customCursor": "customCursor"; "dataSourceSettings": "dataSourceSettings"; "diagramSettings": "diagramSettings"; "drawingObject": "drawingObject"; "enableConnectorSplit": "enableConnectorSplit"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "getConnectorDefaults": "getConnectorDefaults"; "getCustomCursor": "getCustomCursor"; "getCustomProperty": "getCustomProperty"; "getCustomTool": "getCustomTool"; "getDescription": "getDescription"; "getNodeDefaults": "getNodeDefaults"; "height": "height"; "historyManager": "historyManager"; "layers": "layers"; "layout": "layout"; "locale": "locale"; "mode": "mode"; "nodeDefaults": "nodeDefaults"; "nodeTemplate": "nodeTemplate"; "nodes": "nodes"; "pageSettings": "pageSettings"; "rulerSettings": "rulerSettings"; "scrollSettings": "scrollSettings"; "segmentThumbShape": "segmentThumbShape"; "selectedItems": "selectedItems"; "serializationSettings": "serializationSettings"; "setNodeTemplate": "setNodeTemplate"; "snapSettings": "snapSettings"; "tool": "tool"; "tooltip": "tooltip"; "updateSelection": "updateSelection"; "userHandleTemplate": "userHandleTemplate"; "width": "width"; }, { "animationComplete": "animationComplete"; "click": "click"; "collectionChange": "collectionChange"; "commandExecute": "commandExecute"; "connectionChange": "connectionChange"; "contextMenuBeforeItemRender": "contextMenuBeforeItemRender"; "contextMenuClick": "contextMenuClick"; "contextMenuOpen": "contextMenuOpen"; "created": "created"; "dataLoaded": "dataLoaded"; "doubleClick": "doubleClick"; "dragEnter": "dragEnter"; "dragLeave": "dragLeave"; "dragOver": "dragOver"; "drop": "drop"; "expandStateChange": "expandStateChange"; "fixedUserHandleClick": "fixedUserHandleClick"; "historyChange": "historyChange"; "historyStateChange": "historyStateChange"; "keyDown": "keyDown"; "keyUp": "keyUp"; "mouseEnter": "mouseEnter"; "mouseLeave": "mouseLeave"; "mouseOver": "mouseOver"; "mouseWheel": "mouseWheel"; "onImageLoad": "onImageLoad"; "onUserHandleMouseDown": "onUserHandleMouseDown"; "onUserHandleMouseEnter": "onUserHandleMouseEnter"; "onUserHandleMouseLeave": "onUserHandleMouseLeave"; "onUserHandleMouseUp": "onUserHandleMouseUp"; "positionChange": "positionChange"; "propertyChange": "propertyChange"; "rotateChange": "rotateChange"; "scrollChange": "scrollChange"; "segmentChange": "segmentChange"; "segmentCollectionChange": "segmentCollectionChange"; "selectionChange": "selectionChange"; "sizeChange": "sizeChange"; "sourcePointChange": "sourcePointChange"; "targetPointChange": "targetPointChange"; "textEdit": "textEdit"; "elementDraw": "elementDraw"; }, ["annotationTemplate", "nodeTemplate", "userHandleTemplate", "childLayers", "childCustomCursor", "childConnectors", "childNodes"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "ejs-diagram", never, { "addInfo": "addInfo"; "annotationTemplate": "annotationTemplate"; "backgroundColor": "backgroundColor"; "bridgeDirection": "bridgeDirection"; "commandManager": "commandManager"; "connectorDefaults": "connectorDefaults"; "connectors": "connectors"; "constraints": "constraints"; "contextMenuSettings": "contextMenuSettings"; "customCursor": "customCursor"; "dataSourceSettings": "dataSourceSettings"; "diagramSettings": "diagramSettings"; "drawingObject": "drawingObject"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "getConnectorDefaults": "getConnectorDefaults"; "getCustomCursor": "getCustomCursor"; "getCustomProperty": "getCustomProperty"; "getCustomTool": "getCustomTool"; "getDescription": "getDescription"; "getNodeDefaults": "getNodeDefaults"; "height": "height"; "historyManager": "historyManager"; "layers": "layers"; "layout": "layout"; "locale": "locale"; "mode": "mode"; "nodeDefaults": "nodeDefaults"; "nodeTemplate": "nodeTemplate"; "nodes": "nodes"; "pageSettings": "pageSettings"; "rulerSettings": "rulerSettings"; "scrollSettings": "scrollSettings"; "selectedItems": "selectedItems"; "serializationSettings": "serializationSettings"; "setNodeTemplate": "setNodeTemplate"; "snapSettings": "snapSettings"; "tool": "tool"; "tooltip": "tooltip"; "updateSelection": "updateSelection"; "userHandleTemplate": "userHandleTemplate"; "width": "width"; }, { "animationComplete": "animationComplete"; "click": "click"; "collectionChange": "collectionChange"; "commandExecute": "commandExecute"; "connectionChange": "connectionChange"; "contextMenuBeforeItemRender": "contextMenuBeforeItemRender"; "contextMenuClick": "contextMenuClick"; "contextMenuOpen": "contextMenuOpen"; "created": "created"; "dataLoaded": "dataLoaded"; "doubleClick": "doubleClick"; "dragEnter": "dragEnter"; "dragLeave": "dragLeave"; "dragOver": "dragOver"; "drop": "drop"; "expandStateChange": "expandStateChange"; "fixedUserHandleClick": "fixedUserHandleClick"; "historyChange": "historyChange"; "historyStateChange": "historyStateChange"; "keyDown": "keyDown"; "keyUp": "keyUp"; "mouseEnter": "mouseEnter"; "mouseLeave": "mouseLeave"; "mouseOver": "mouseOver"; "onImageLoad": "onImageLoad"; "onUserHandleMouseDown": "onUserHandleMouseDown"; "onUserHandleMouseEnter": "onUserHandleMouseEnter"; "onUserHandleMouseLeave": "onUserHandleMouseLeave"; "onUserHandleMouseUp": "onUserHandleMouseUp"; "positionChange": "positionChange"; "propertyChange": "propertyChange"; "rotateChange": "rotateChange"; "scrollChange": "scrollChange"; "segmentCollectionChange": "segmentCollectionChange"; "selectionChange": "selectionChange"; "sizeChange": "sizeChange"; "sourcePointChange": "sourcePointChange"; "targetPointChange": "targetPointChange"; "textEdit": "textEdit"; }, ["annotationTemplate", "nodeTemplate", "userHandleTemplate", "childLayers", "childCustomCursor", "childConnectors", "childNodes"], never>;
 }

package/styles/bootstrap-dark.css

@@ -307,13 +307,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #313131;
+  background: #313131;
   color: #f0f0f0;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #313131;
+  background: #313131;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/bootstrap.css

@@ -307,13 +307,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
   color: #8c8c8c;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/bootstrap4.css

@@ -307,13 +307,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
   color: #f8f9fa;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/bootstrap5-dark.css

@@ -308,13 +308,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #282d31;
+  background: #282d31;
   color: #ced4da;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #282d31;
+  background: #282d31;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/bootstrap5.css

@@ -308,13 +308,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
   color: #495057;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/_material3-dark-definition.scss

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/diagram/_material3-definition.scss

@@ -0,0 +1,101 @@
+@import 'definition.scss';
+
+//layout variables
+$diagram-border-stroke-width: 2;
+$diagram-lane-border-stroke-width: 2;
+$diagram-highlighter-border-stroke-width: 2;
+$diagram-symbolpalette-shape-radius: 4px;
+$diagram-tooltip: none;
+
+//normal
+$diagram-endpoint-handle-color: rgba($primary-text-color);
+$diagram-endpoint-handle-connected-border: rgba($primary-text-color);
+
+$diagram-resize-handle-disable-color: rgba($border-light);
+$diagram-border-stroke-disabled: rgba($border-light);
+$diagram-resize-handle-disable-stroke: rgba($primary-text-color);
+$diagram-rotate-handle-color: rgba($primary);
+$diagram-bezier-handle-color: rgba($primary-text-color);
+
+$diagram-symbolpalette-hover: $diagram-palette-hover-background;
+$diagram-symbolpalette-selected: $diagram-palette-selection-background;
+
+$diagram-ruler-color: rgba($content-text-color-alt2);
+$diagram-ruler-font-size: $text-xxs;
+$diagram-ruler-marker-background-color: $content-bg-color-alt1;
+$diagram-ruler-label-fill: rgba($content-text-color-alt2);
+$diagram-ruler-tick-stroke: rgba($series-3);
+
+$palette-background-color: rgba($diagram-palette-background);
+
+$diagram-background-color: rgba($white);
+$diagram-editbox-fontcolor: rgba($black);
+
+//end normal
+//primary
+$diagram-endpoint-handle-connected-color: rgba($primary);
+
+$diagram-resize-handle-color: rgba($primary);
+$diagram-resize-handle-stroke: rgba($primary);
+
+$diagram-border-stroke: rgba($primary);
+$diagram-bezier-line-color: rgba($primary);
+
+$diagram-highlighter-stroke: rgba($primary);
+$diagram-selected-region-stroke: rgba($primary);
+$diagram-pivot-line-stroke: rgba($primary);
+$diagram-ruler-marker-stroke: rgba($primary);
+
+$diagram-helper-stroke: rgba($primary);
+
+$diagram-text-edit-selection-background: rgba($primary);
+$diagram-editbox-background: rgba($primary-text-color);
+
+$diagram-border-strokes: rgba($primary);
+$diagram-lane-border-strokes: rgba($primary);
+$diagram-text-edit-selection-color: rgba($primary-text-color);
+
+$diagram-multiselect-stroke: $diagram-resize-handle-stroke;
+
+//end primary
+
+.e-icons {
+  font-family: 'e-icons';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+}
+
+@include export-module('diagram-bootstrap-icons') {
+  .e-diagram-menu {
+    .e-bringforward::before{ content: '\e72f'; }
+    .e-bringfront::before{ content: '\e840'; }
+    .e-sendback::before{ content: '\e78a'; }
+    .e-sendbackward::before{ content: '\e7ed'; }
+    .e-delete::before{ content: '\e94a'; }
+    .e-ungroup::before{ content: '\e749'; }
+    .e-group::before{ content: '\e7f4'; }
+    .e-undo::before{ content: '\e713'; }
+    .e-redo::before{ content: '\e755'; }
+    .e-copy::before{ content: '\e77c'; }
+    .e-cut::before{ content: '\e7fb'; }
+    .e-save::before{ content: '\e7c8'; }
+    .e-paste::before{ content: '\e70b'; }
+    .e-zoomin::before{ content: '\e795'; }
+    .e-italic::before{ content: '\e75a'; }
+    .e-close::before{ content: '\e7e7'; }
+    .e-pan::before{ content: '\e7b1'; }
+    .e-bold::before{ content: '\e737'; }
+    .e-underline::before{ content: '\e82f'; }
+    .e-zoomout::before{ content: '\e825'; }
+    .e-export::before{ content: '\e72e'; }
+    .e-print::before{ content: '\e75d'; }
+    .e-order::before{ content: '\e809'; }
+  }
+
+  .e-symbolpalette {
+    .e-clear-searchtext::before{ content: '\e754'; }
+  }
+}

package/styles/diagram/_theme.scss

@@ -147,13 +147,13 @@
   }
 
   .e-diagram .e-ruler {
-    background-color: $diagram-ruler-marker-background-color;
+    background: $diagram-ruler-marker-background-color;
     color: $diagram-ruler-color;
     font-size: $diagram-ruler-font-size;
   }
 
   .e-diagram .e-ruler-overlap {
-    background-color: $diagram-ruler-marker-background-color;
+    background: $diagram-ruler-marker-background-color;
   }
 
   .e-diagram .e-d-ruler-marker {

package/styles/diagram/bootstrap-dark.css

@@ -307,13 +307,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #313131;
+  background: #313131;
   color: #f0f0f0;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #313131;
+  background: #313131;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/bootstrap.css

@@ -307,13 +307,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
   color: #8c8c8c;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/bootstrap4.css

@@ -307,13 +307,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
   color: #f8f9fa;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/bootstrap5-dark.css

@@ -308,13 +308,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #282d31;
+  background: #282d31;
   color: #ced4da;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #282d31;
+  background: #282d31;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/bootstrap5.css

@@ -308,13 +308,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
   color: #495057;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/fabric-dark.css

@@ -307,13 +307,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #333232;
+  background: #333232;
   color: #9a9a9a;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #333232;
+  background: #333232;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/fabric.css

@@ -307,13 +307,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
   color: #a6a6a6;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/fluent-dark.css

@@ -308,13 +308,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #201f1e;
+  background: #201f1e;
   color: #c8c6c4;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #201f1e;
+  background: #201f1e;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/fluent.css

@@ -308,13 +308,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #faf9f8;
+  background: #faf9f8;
   color: #3b3a39;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #faf9f8;
+  background: #faf9f8;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/highcontrast-light.css

@@ -306,13 +306,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #fff;
+  background: #fff;
   color: rgb(166, 166, 166);
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #fff;
+  background: #fff;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/highcontrast.css

@@ -308,13 +308,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #000;
+  background: #000;
   color: #ffd939;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #000;
+  background: #000;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/material-dark.css

@@ -308,13 +308,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #424242;
+  background: #424242;
   color: #f5f5f5;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #424242;
+  background: #424242;
 }
 
 .e-diagram .e-d-ruler-marker {

package/styles/diagram/material.css

@@ -308,13 +308,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #f5f5f5;
+  background: #f5f5f5;
   color: #f5f5f5;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #f5f5f5;
+  background: #f5f5f5;
 }
 
 .e-diagram .e-d-ruler-marker {