@syncfusion/ej2-angular-diagrams 20.2.49-ngcc → 20.2.49

package/src/diagram/node-fixeduserhandle.directive.d.ts

@@ -1,5 +1,6 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
 /**
  * Nodes Directive
  * ```html
@@ -87,6 +88,8 @@ export declare class NodeFixedUserHandleDirective extends ComplexBase<NodeFixedU
      */
     width: any;
     constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodeFixedUserHandleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NodeFixedUserHandleDirective, "e-node>e-node-fixeduserhandles>e-node-fixeduserhandle", never, { "cornerRadius": "cornerRadius"; "fill": "fill"; "handleStrokeColor": "handleStrokeColor"; "handleStrokeWidth": "handleStrokeWidth"; "height": "height"; "iconStrokeColor": "iconStrokeColor"; "iconStrokeWidth": "iconStrokeWidth"; "id": "id"; "margin": "margin"; "offset": "offset"; "padding": "padding"; "pathData": "pathData"; "visibility": "visibility"; "width": "width"; }, {}, never>;
 }
 /**
  * NodeFixedUserHandle Array Directive
@@ -94,4 +97,6 @@ export declare class NodeFixedUserHandleDirective extends ComplexBase<NodeFixedU
  */
 export declare class NodeFixedUserHandlesDirective extends ArrayBase<NodeFixedUserHandlesDirective> {
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodeFixedUserHandlesDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NodeFixedUserHandlesDirective, "e-node>e-node-fixeduserhandles", never, {}, {}, ["children"]>;
 }

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

@@ -1,5 +1,6 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
 /**
  * Nodes Directive
  * ```html
@@ -34,13 +35,13 @@ export declare class NodeDirective extends ComplexBase<NodeDirective> {
     backgroundColor: any;
     /**
      * Sets the border color of the node
-
+     * @deprecated
      * @default 'none'
      */
     borderColor: any;
     /**
      * Sets the border width of the node
-
+     * @deprecated
      * @default 0
      */
     borderWidth: any;
@@ -116,7 +117,7 @@ export declare class NodeDirective extends ComplexBase<NodeDirective> {
      * Defines the type of the container
      * @aspdefaultvalueignore
      * @default null
-
+     * @deprecated
      */
     container: any;
     /**
@@ -266,7 +267,7 @@ export declare class NodeDirective extends ComplexBase<NodeDirective> {
     /**
      * Used to define the rows for the grid container
      * @aspdefaultvalueignore
-
+     * @deprecated
      * @default undefined
      */
     rows: any;
@@ -318,7 +319,7 @@ export declare class NodeDirective extends ComplexBase<NodeDirective> {
     /**
      * Sets or gets the UI of a node
      * @default null
-
+     * @deprecated
      */
     wrapper: any;
     /**
@@ -327,6 +328,8 @@ export declare class NodeDirective extends ComplexBase<NodeDirective> {
      */
     zIndex: any;
     constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NodeDirective, "e-nodes>e-node", never, { "addInfo": "addInfo"; "annotations": "annotations"; "backgroundColor": "backgroundColor"; "borderColor": "borderColor"; "borderWidth": "borderWidth"; "branch": "branch"; "children": "children"; "collapseIcon": "collapseIcon"; "columnIndex": "columnIndex"; "columnSpan": "columnSpan"; "columns": "columns"; "constraints": "constraints"; "container": "container"; "data": "data"; "dragSize": "dragSize"; "excludeFromLayout": "excludeFromLayout"; "expandIcon": "expandIcon"; "fixedUserHandles": "fixedUserHandles"; "flip": "flip"; "flipMode": "flipMode"; "height": "height"; "horizontalAlignment": "horizontalAlignment"; "id": "id"; "isExpanded": "isExpanded"; "layoutInfo": "layoutInfo"; "margin": "margin"; "maxHeight": "maxHeight"; "maxWidth": "maxWidth"; "minHeight": "minHeight"; "minWidth": "minWidth"; "offsetX": "offsetX"; "offsetY": "offsetY"; "padding": "padding"; "pivot": "pivot"; "ports": "ports"; "previewSize": "previewSize"; "rotateAngle": "rotateAngle"; "rowIndex": "rowIndex"; "rowSpan": "rowSpan"; "rows": "rows"; "shadow": "shadow"; "shape": "shape"; "style": "style"; "symbolInfo": "symbolInfo"; "tooltip": "tooltip"; "verticalAlignment": "verticalAlignment"; "visible": "visible"; "width": "width"; "wrapper": "wrapper"; "zIndex": "zIndex"; }, {}, ["childFixedUserHandles", "childAnnotations", "childPorts"]>;
 }
 /**
  * Node Array Directive
@@ -334,4 +337,6 @@ export declare class NodeDirective extends ComplexBase<NodeDirective> {
  */
 export declare class NodesDirective extends ArrayBase<NodesDirective> {
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodesDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NodesDirective, "ej-diagram>e-nodes", never, {}, {}, ["children"]>;
 }

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

@@ -1,5 +1,6 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
 /**
  * Nodes Directive
  * ```html
@@ -117,6 +118,8 @@ export declare class PortDirective extends ComplexBase<PortDirective> {
      */
     width: any;
     constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PortDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PortDirective, "e-node>e-node-ports>e-node-port", never, { "addInfo": "addInfo"; "constraints": "constraints"; "height": "height"; "horizontalAlignment": "horizontalAlignment"; "id": "id"; "inEdges": "inEdges"; "margin": "margin"; "offset": "offset"; "outEdges": "outEdges"; "pathData": "pathData"; "shape": "shape"; "style": "style"; "verticalAlignment": "verticalAlignment"; "visibility": "visibility"; "width": "width"; }, {}, never>;
 }
 /**
  * Port Array Directive
@@ -124,4 +127,6 @@ export declare class PortDirective extends ComplexBase<PortDirective> {
  */
 export declare class PortsDirective extends ArrayBase<PortsDirective> {
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<PortsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PortsDirective, "e-node>e-node-ports", never, {}, {}, ["children"]>;
 }

package/src/overview/overview-all.module.d.ts

@@ -1,5 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./overview.module";
 /**
  * NgModule definition for the Overview component with providers.
  */
 export declare class OverviewAllModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverviewAllModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OverviewAllModule, never, [typeof i1.CommonModule, typeof i2.OverviewModule], [typeof i2.OverviewModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OverviewAllModule>;
 }

package/src/overview/overview.component.d.ts

@@ -1,6 +1,7 @@
 import { ElementRef, ViewContainerRef, Renderer2, Injector } from '@angular/core';
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { Overview } from '@syncfusion/ej2-diagrams';
+import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -26,4 +27,6 @@ export declare class OverviewComponent extends Overview implements IComponentBas
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverviewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OverviewComponent, "ejs-overview", never, { "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "height": "height"; "locale": "locale"; "sourceID": "sourceID"; "width": "width"; }, { "created": "created"; }, never, never>;
 }

package/src/overview/overview.module.d.ts

@@ -1,5 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./overview.component";
+import * as i2 from "@angular/common";
 /**
  * NgModule definition for the Overview component.
  */
 export declare class OverviewModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverviewModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OverviewModule, [typeof i1.OverviewComponent], [typeof i2.CommonModule], [typeof i1.OverviewComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OverviewModule>;
 }

package/src/symbol-palette/palettes.directive.d.ts

@@ -1,5 +1,6 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
 /**
  * Palette Directive
  * ```html
@@ -41,6 +42,8 @@ export declare class PaletteDirective extends ComplexBase<PaletteDirective> {
      */
     title: any;
     constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PaletteDirective, "e-palettes>e-palette", never, { "expanded": "expanded"; "height": "height"; "iconCss": "iconCss"; "id": "id"; "symbols": "symbols"; "title": "title"; }, {}, never>;
 }
 /**
  * Palette Array Directive
@@ -48,4 +51,6 @@ export declare class PaletteDirective extends ComplexBase<PaletteDirective> {
  */
 export declare class PalettesDirective extends ArrayBase<PalettesDirective> {
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<PalettesDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PalettesDirective, "ejs-symbolpalette>e-palettes", never, {}, {}, ["children"]>;
 }

package/src/symbol-palette/symbolpalette-all.module.d.ts

@@ -1,5 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./symbolpalette.module";
 /**
  * NgModule definition for the SymbolPalette component with providers.
  */
 export declare class SymbolPaletteAllModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SymbolPaletteAllModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SymbolPaletteAllModule, never, [typeof i1.CommonModule, typeof i2.SymbolPaletteModule], [typeof i2.SymbolPaletteModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SymbolPaletteAllModule>;
 }

package/src/symbol-palette/symbolpalette.component.d.ts

@@ -2,6 +2,7 @@ import { ElementRef, ViewContainerRef, QueryList, Renderer2, Injector } from '@a
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { SymbolPalette } from '@syncfusion/ej2-diagrams';
 import { PalettesDirective } from './palettes.directive';
+import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -29,4 +30,6 @@ export declare class SymbolPaletteComponent extends SymbolPalette implements ICo
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SymbolPaletteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SymbolPaletteComponent, "ejs-symbolpalette", never, { "accessKey": "accessKey"; "allowDrag": "allowDrag"; "connectorDefaults": "connectorDefaults"; "enableAnimation": "enableAnimation"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "enableSearch": "enableSearch"; "expandMode": "expandMode"; "filterSymbols": "filterSymbols"; "getConnectorDefaults": "getConnectorDefaults"; "getNodeDefaults": "getNodeDefaults"; "getSymbolInfo": "getSymbolInfo"; "getSymbolTemplate": "getSymbolTemplate"; "height": "height"; "ignoreSymbolsOnSearch": "ignoreSymbolsOnSearch"; "locale": "locale"; "nodeDefaults": "nodeDefaults"; "palettes": "palettes"; "symbolDragSize": "symbolDragSize"; "symbolHeight": "symbolHeight"; "symbolInfo": "symbolInfo"; "symbolMargin": "symbolMargin"; "symbolPreview": "symbolPreview"; "symbolWidth": "symbolWidth"; "width": "width"; }, { "paletteExpanding": "paletteExpanding"; "paletteSelectionChange": "paletteSelectionChange"; }, ["childPalettes"], never>;
 }

package/src/symbol-palette/symbolpalette.module.d.ts

@@ -1,5 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./symbolpalette.component";
+import * as i2 from "./palettes.directive";
+import * as i3 from "@angular/common";
 /**
  * NgModule definition for the SymbolPalette component.
  */
 export declare class SymbolPaletteModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SymbolPaletteModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SymbolPaletteModule, [typeof i1.SymbolPaletteComponent, typeof i2.PaletteDirective, typeof i2.PalettesDirective], [typeof i3.CommonModule], [typeof i1.SymbolPaletteComponent, typeof i2.PaletteDirective, typeof i2.PalettesDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SymbolPaletteModule>;
 }

package/styles/diagram/_all.scss

@@ -0,0 +1 @@
+@import 'theme.scss';

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

@@ -0,0 +1,102 @@
+@import 'definition.scss';
+
+$skin-name: 'bootstrap-dark';
+
+//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-ruler-font-size: 10px;
+$diagram-tooltip: none;
+
+//normal
+$diagram-resize-handle-disable-color: $grey-cc;
+$diagram-border-stroke-disabled: $grey-cc;
+$diagram-resize-handle-disable-stroke: $brand-primary-font;
+$diagram-rotate-handle-color: $brand-primary;
+$diagram-bezier-handle-color: $brand-primary-font;
+
+$diagram-symbolpalette-hover: lighten($grey-cc, 5%);
+$diagram-symbolpalette-selected: $grey-cc;
+
+$diagram-ruler-color: $grey-dark-font;
+$diagram-ruler-marker-stroke: $brand-primary;
+$diagram-ruler-marker-background-color: $grey;
+$diagram-ruler-label-fill: lighten($grey-cc, 10%);
+$diagram-ruler-tick-stroke: $grey-f8;
+//end normal
+
+//primary
+$diagram-endpoint-handle-color: $brand-primary-font;
+$diagram-endpoint-handle-connected-border: $brand-primary-font;
+$diagram-endpoint-handle-connected-color: $brand-primary;
+
+$diagram-resize-handle-color: $brand-primary;
+$diagram-resize-handle-stroke: $brand-primary;
+$diagram-border-stroke: $brand-primary-darken-10;
+
+$diagram-bezier-line-color: $brand-primary;
+
+$palette-background-color: lighten($grey-cc, 20%);
+
+$diagram-highlighter-stroke: $brand-primary;
+$diagram-selected-region-stroke: $brand-primary;
+$diagram-pivot-line-stroke: $brand-primary;
+
+$diagram-helper-stroke: $brand-primary;
+
+$diagram-text-edit-selection-color: $brand-primary-font;
+$diagram-text-edit-selection-background: $brand-primary;
+
+$diagram-background-color: $brand-primary-font;
+
+$diagram-editbox-background: $brand-primary-font;
+$diagram-editbox-fontcolor: $gray-base;
+
+$diagram-border-strokes: $brand-primary-darken-10;
+$diagram-lane-border-strokes: $brand-primary;
+
+$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: '\e5a1'; }
+    .e-bringfront::before { content: '\e5a2'; }
+    .e-sendback::before { content: '\e5a3'; }
+    .e-sendbackward::before { content: '\e5a4'; }
+    .e-delete::before { content: '\e94a'; }
+    .e-ungroup::before { content: '\e5a6'; }
+    .e-group::before { content: '\e5a7'; }
+    .e-undo::before { content: '\e341'; }
+    .e-redo::before { content: '\e354'; }
+    .e-copy::before { content: '\e33d'; }
+    .e-cut::before { content: '\e33b'; }
+    .e-save::before { content: '\ebc2'; }
+    .e-paste::before { content: '\e355'; }
+    .e-zoomin::before { content: '\e349'; }
+    .e-italic::before { content: '\e35a'; }
+    .e-close::before { content: '\ea7b'; }
+    .e-pan::before { content: '\ebcb'; }
+    .e-bold::before { content: '\e339'; }
+    .e-underline::before { content: '\e343'; }
+    .e-zoomout::before { content: '\e351'; }
+    .e-export::before { content: '\e702'; }
+    .e-print::before { content: '\e34b'; }
+    .e-order::before { content: '\e4a4'; }
+  }
+
+  .e-symbolpalette {
+    .e-clear-searchtext::before { content: '\e60e'; }
+  }
+}

package/styles/diagram/_bootstrap-definition.scss

@@ -0,0 +1,102 @@
+@import 'definition.scss';
+
+$skin-name: 'bootstrap';
+
+//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-ruler-font-size: 10px;
+$diagram-tooltip: none;
+
+//normal
+$diagram-resize-handle-disable-color: $grey-cc;
+$diagram-border-stroke-disabled: $grey-cc;
+$diagram-resize-handle-disable-stroke: $brand-primary-font;
+$diagram-rotate-handle-color: $brand-primary;
+$diagram-bezier-handle-color: $brand-primary-font;
+
+$diagram-symbolpalette-hover: $grey-f5;
+$diagram-symbolpalette-selected: $grey-cc;
+
+$palette-background-color: #fff;
+
+$diagram-ruler-color: $grey-8c;
+$diagram-ruler-marker-stroke: $brand-primary;
+$diagram-ruler-marker-background-color: $grey-f8;
+$diagram-ruler-label-fill: $grey-44;
+$diagram-ruler-tick-stroke: $grey-dd;
+//end normal
+
+//primary
+$diagram-endpoint-handle-color: $brand-primary-font;
+$diagram-endpoint-handle-connected-border: $brand-primary-font;
+$diagram-endpoint-handle-connected-color: $brand-primary;
+
+$diagram-resize-handle-color: $brand-primary;
+$diagram-resize-handle-stroke: $brand-primary;
+$diagram-border-stroke: $brand-primary-darken-10;
+
+$diagram-bezier-line-color: $brand-primary;
+
+$diagram-highlighter-stroke: $brand-primary;
+$diagram-selected-region-stroke: $brand-primary;
+$diagram-pivot-line-stroke: $brand-primary;
+
+$diagram-helper-stroke: $brand-primary;
+
+$diagram-text-edit-selection-color: $brand-primary-font;
+$diagram-text-edit-selection-background: $brand-primary;
+
+$diagram-background-color: $brand-primary-font;
+
+$diagram-editbox-background: $brand-primary-font;
+$diagram-editbox-fontcolor: $gray-base;
+
+$diagram-border-strokes: $brand-primary-darken-10;
+$diagram-lane-border-strokes: $brand-primary;
+
+$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: '\e5a1'; }
+    .e-bringfront::before { content: '\e5a2'; }
+    .e-sendback::before { content: '\e5a3'; }
+    .e-sendbackward::before { content: '\e5a4'; }
+    .e-delete::before { content: '\e94a'; }
+    .e-ungroup::before { content: '\e5a6'; }
+    .e-group::before { content: '\e5a7'; }
+    .e-undo::before { content: '\e341'; }
+    .e-redo::before { content: '\e354'; }
+    .e-copy::before { content: '\e33d'; }
+    .e-cut::before { content: '\e33b'; }
+    .e-save::before { content: '\ebc2'; }
+    .e-paste::before { content: '\e355'; }
+    .e-zoomin::before { content: '\e349'; }
+    .e-italic::before { content: '\e35a'; }
+    .e-close::before { content: '\ea7b'; }
+    .e-pan::before { content: '\ebcb'; }
+    .e-bold::before { content: '\e339'; }
+    .e-underline::before { content: '\e343'; }
+    .e-zoomout::before { content: '\e351'; }
+    .e-export::before { content: '\e702'; }
+    .e-print::before { content: '\e34b'; }
+    .e-order::before { content: '\e4a4'; }
+}
+
+  .e-symbolpalette {
+    .e-clear-searchtext::before { content: '\e60e'; }
+  }
+}

package/styles/diagram/_bootstrap4-definition.scss

@@ -0,0 +1,98 @@
+@import 'definition.scss';
+
+$skin-name: 'bootstrap4';
+
+$diagram-endpoint-handle-color: $white;
+$diagram-endpoint-handle-connected-border: $white;
+$diagram-endpoint-handle-connected-color: $blue;
+
+$diagram-resize-handle-color: $blue;
+$diagram-resize-handle-stroke: $blue;
+$diagram-border-stroke: $blue;
+
+$diagram-resize-handle-disable-color:  $gray-400;
+$diagram-resize-handle-disable-stroke: $white;
+$diagram-border-stroke-disabled: $gray-400;
+
+$diagram-rotate-handle-color: $blue;
+
+$diagram-helper-stroke:  $blue ;
+
+$diagram-highlighter-stroke: $blue;
+$diagram-selected-region-stroke: $blue;
+$diagram-pivot-line-stroke: $blue;
+
+$diagram-bezier-handle-color: $blue;
+$diagram-bezier-line-color: $blue;
+
+$diagram-text-edit-selection-color: $white;
+$diagram-text-edit-selection-background: $blue;
+
+$diagram-symbolpalette-hover: $gray-200;
+$diagram-symbolpalette-shape-radius: 4px;
+$diagram-symbolpalette-selected: $blue;
+
+$diagram-tooltip: none;
+
+$diagram-ruler-color: $gray-100;
+$diagram-ruler-font: $gray-700;
+$diagram-ruler-font-size: 10px;
+$diagram-ruler-marker-stroke: $blue;
+$diagram-ruler-marker-background-color: $gray-100;
+$diagram-ruler-label-fill: $gray-700;
+$diagram-ruler-tick-stroke: $gray-300;
+
+$diagram-background-color: $white;
+
+$palette-background-color: #fff;
+
+$diagram-editbox-background: $white;
+$diagram-editbox-fontcolor: $gray-900;
+$diagram-border-stroke-width: 2;
+$diagram-lane-border-stroke-width: 2;
+$diagram-highlighter-border-stroke-width: 2;
+$diagram-border-strokes: $blue;
+$diagram-lane-border-strokes: $blue;
+
+$diagram-multiselect-stroke: $diagram-resize-handle-stroke;
+
+.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: '\e801'; }
+    .e-bringfront::before { content: '\e803'; }
+    .e-sendback::before { content: '\e7fe'; }
+    .e-sendbackward::before { content: '\e7fd'; }
+    .e-delete::before { content: '\e7fd'; }
+    .e-ungroup::before { content: '\e800'; }
+    .e-group::before { content: '\e802'; }
+    .e-undo::before { content: '\e752'; }
+    .e-cut::before { content: '\e73f'; }
+    .e-save::before { content: '\e74d'; }
+    .e-paste::before { content: '\e739'; }
+    .e-copy::before { content: '\e77b'; }
+    .e-redo::before { content: '\e778'; }
+    .e-zoomin::before { content: '\e70a'; }
+    .e-italic::before { content: '\e78e'; }
+    .e-close::before { content: '\e745'; }
+    .e-pan::before { content: '\e711'; }
+    .e-bold::before { content: '\e78b'; }
+    .e-underline::before { content: '\e792'; }
+    .e-zoomout::before { content: '\e74a'; }
+    .e-export::before { content: '\e780'; }
+    .e-print::before { content: '\e743'; }
+    .e-order::before { content: '\e7ff'; }
+  }
+
+  .e-symbolpalette {
+    .e-clear-searchtext::before { content: '\e724'; }
+   }
+}

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

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

package/styles/diagram/_bootstrap5-definition.scss

@@ -0,0 +1,99 @@
+@import 'definition.scss';
+
+$skin-name: 'bootstrap5';
+//layout variables
+$diagram-border-stroke-width: 2;
+$diagram-lane-border-stroke-width: 2;
+$diagram-highlighter-border-stroke-width: 2;
+$diagram-symbolpalette-shape-radius: 00px;
+$diagram-tooltip: none;
+//normal
+$diagram-endpoint-handle-color: $white;
+$diagram-endpoint-handle-connected-border: $white;
+
+$diagram-resize-handle-disable-color: $content-bg-color-alt5;
+$diagram-border-stroke-disabled: $content-bg-color-alt5;
+$diagram-resize-handle-disable-stroke: $white;
+$diagram-rotate-handle-color: $primary;
+$diagram-bezier-handle-color: $white;
+
+$diagram-symbolpalette-hover: $diagram-palette-hover-background;
+$diagram-symbolpalette-selected: $diagram-palette-hover-background;
+
+$diagram-ruler-color: $content-text-color-alt2;
+$diagram-ruler-font-size: $text-xxs;
+$diagram-ruler-marker-background-color: $content-bg-color-alt1;
+$diagram-ruler-label-fill: $content-text-color-alt2;
+$diagram-ruler-tick-stroke: $series-3;
+
+$palette-background-color: $diagram-palette-background;
+
+$diagram-background-color: $white;
+$diagram-editbox-fontcolor: $black;
+//end normal
+//primary
+$diagram-endpoint-handle-connected-color: $primary;
+
+$diagram-resize-handle-color: $primary;
+$diagram-resize-handle-stroke: $primary;
+
+$diagram-border-stroke: $primary;
+$diagram-bezier-line-color: $primary;
+
+$diagram-highlighter-stroke: $primary;
+$diagram-selected-region-stroke: $primary;
+$diagram-pivot-line-stroke: $primary;
+$diagram-ruler-marker-stroke: $primary;
+
+$diagram-helper-stroke: $primary;
+
+$diagram-text-edit-selection-background: $primary;
+$diagram-editbox-background: $primary-text-color;
+
+$diagram-border-strokes: $primary;
+$diagram-lane-border-strokes: $primary;
+$diagram-text-edit-selection-color: $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'; }
+}
+}