WIP. remake Diagram with popup demo for using standalone

Author: GoodDayForSurf

apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.html

@@ -5,7 +5,7 @@
   customShapeToolboxTemplate="customShapeToolboxTemplate"
   (onRequestLayoutUpdate)="requestLayoutUpdateHandler($event)"
 >
-  <dxi-custom-shape
+  <dxi-diagram-custom-shape
     type="employee"
     baseType="rectangle"
     category="employee"
@@ -19,7 +19,7 @@
     [maxHeight]="2"
     [allowEditText]="false"
   >
-  </dxi-custom-shape>
+  </dxi-diagram-custom-shape>
   <svg *dxTemplate="let item of 'customShapeTemplate'" class="template">
     <text class="template-name" x="50%" y="20%">
       {{ item.dataItem ? item.dataItem.Full_Name : "Employee's Name" }}
@@ -48,32 +48,32 @@
     <text x="50%" y="40%">New</text>
     <text x="50%" y="70%">Employee</text>
   </svg>
-  <dxo-nodes
+  <dxo-diagram-nodes
     [dataSource]="dataSource"
     keyExpr="ID"
     [typeExpr]="itemTypeExpr"
     [customDataExpr]="itemCustomDataExpr"
     parentKeyExpr="Head_ID"
   >
-    <dxo-auto-layout type="tree"></dxo-auto-layout>
-  </dxo-nodes>
-  <dxo-context-toolbox [width]="100" [shapeIconsPerRow]="1">
-  </dxo-context-toolbox>
-  <dxo-toolbox [showSearch]="false" [shapeIconsPerRow]="1">
-    <dxi-group
+    <dxo-diagram-auto-layout type="tree"></dxo-diagram-auto-layout>
+  </dxo-diagram-nodes>
+  <dxo-diagram-context-toolbox [width]="100" [shapeIconsPerRow]="1">
+  </dxo-diagram-context-toolbox>
+  <dxo-diagram-toolbox [showSearch]="false" [shapeIconsPerRow]="1">
+    <dxi-diagram-toolbox-group
       category="employee"
       title="Employee"
       [expanded]="true"
-    ></dxi-group>
-  </dxo-toolbox>
-  <dxo-properties-panel>
-    <dxi-tab>
-      <dxi-group
+    ></dxi-diagram-toolbox-group>
+  </dxo-diagram-toolbox>
+  <dxo-diagram-properties-panel>
+    <dxi-diagram-tab>
+      <dxi-diagram-tab-group
         title="Page Properties"
         [commands]="['pageSize', 'pageOrientation', 'pageColor']"
-      ></dxi-group>
-    </dxi-tab>
-  </dxo-properties-panel>
+      ></dxi-diagram-tab-group>
+    </dxi-diagram-tab>
+  </dxo-diagram-properties-panel>
 </dx-diagram>
 
 <dx-popup

apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts

@@ -5,8 +5,26 @@ import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import {
-  DxPopupModule, DxTemplateModule, DxDiagramModule, DxDiagramComponent, DxTextBoxModule, DxButtonModule,
+  DxPopupComponent,
+  DxTemplateDirective,
+  DxIntegrationModule,
+  DxTextBoxComponent,
+  DxButtonComponent,
 } from 'devextreme-angular';
+
+import {
+  DxDiagramComponent,
+  DxiDiagramCustomShapeComponent,
+  DxoDiagramNodesComponent,
+  DxoDiagramAutoLayoutComponent,
+  DxoDiagramContextToolboxComponent,
+  DxoDiagramToolboxComponent,
+  DxoDiagramPropertiesPanelComponent,
+  DxiDiagramTabComponent,
+  DxiDiagramToolboxGroupComponent,
+  DxiDiagramTabGroupComponent,
+} from 'devextreme-angular/ui/diagram';
+
 import { ArrayStore } from 'devextreme-angular/common/data';
 import { Service, Employee } from './app.service';
 
@@ -121,12 +139,23 @@ export class AppComponent {
 
 @NgModule({
   imports: [
+    DxPopupComponent,
     BrowserModule,
-    DxDiagramModule,
-    DxPopupModule,
-    DxTextBoxModule,
-    DxButtonModule,
-    DxTemplateModule,
+    DxDiagramComponent,
+    DxiDiagramCustomShapeComponent,
+    DxoDiagramNodesComponent,
+    DxoDiagramAutoLayoutComponent,
+    DxoDiagramContextToolboxComponent,
+    DxoDiagramToolboxComponent,
+    DxoDiagramPropertiesPanelComponent,
+    DxiDiagramTabComponent,
+    DxiDiagramTabGroupComponent,
+    DxiDiagramToolboxGroupComponent,
+    DxPopupComponent,
+    DxTemplateDirective,
+    DxIntegrationModule,
+    DxTextBoxComponent,
+    DxButtonComponent,
   ],
   declarations: [AppComponent],
   bootstrap: [AppComponent],