Migrate Forms/FileManager/HtmlEditor demos to the new nested component syntax (#31557)

Author: dxvladislavvolkov

apps/demos/Demos/FileManager/BindingToEF/Angular/app/app.component.html

@@ -5,29 +5,32 @@
   [allowedFileExtensions]="allowedFileExtensions"
   height="550"
 >
-  <dxo-permissions
+  <dxo-file-manager-permissions
     [create]="true"
     [copy]="true"
     [move]="true"
     [delete]="true"
     [rename]="true"
   >
-  </dxo-permissions>
-  <dxo-item-view>
-    <dxo-details>
-      <dxi-column dataField="thumbnail"></dxi-column>
-      <dxi-column dataField="name"></dxi-column>
-      <dxi-column dataField="dateModified" caption="Modified"></dxi-column>
-      <dxi-column
+  </dxo-file-manager-permissions>
+  <dxo-file-manager-item-view>
+    <dxo-file-manager-details>
+      <dxi-file-manager-column dataField="thumbnail"></dxi-file-manager-column>
+      <dxi-file-manager-column dataField="name"></dxi-file-manager-column>
+      <dxi-file-manager-column
+        dataField="dateModified"
+        caption="Modified"
+      ></dxi-file-manager-column>
+      <dxi-file-manager-column
         dataField="created"
         caption="Created"
         dataType="date"
-      ></dxi-column>
-      <dxi-column
+      ></dxi-file-manager-column>
+      <dxi-file-manager-column
         dataField="modifiedBy"
         caption="Modified By"
         visibleIndex="2"
-      ></dxi-column>
-    </dxo-details>
-  </dxo-item-view>
+      ></dxi-file-manager-column>
+    </dxo-file-manager-details>
+  </dxo-file-manager-item-view>
 </dx-file-manager>

apps/demos/Demos/FileManager/BindingToHierarchicalStructure/Angular/app/app.component.html

@@ -1,5 +1,5 @@
 <dx-file-manager id="fileManager" [fileSystemProvider]="fileItems" height="450">
-  <dxo-permissions
+  <dxo-file-manager-permissions
     [create]="true"
     [copy]="true"
     [move]="true"
@@ -8,5 +8,5 @@
     [upload]="true"
     [download]="true"
   >
-  </dxo-permissions>
+  </dxo-file-manager-permissions>
 </dx-file-manager>

apps/demos/Demos/FileManager/CustomThumbnails/Angular/app/app.component.html

@@ -4,8 +4,8 @@
   [customizeThumbnail]="customizeIcon"
   height="450"
 >
-  <dxo-item-view mode="thumbnails"> </dxo-item-view>
-  <dxo-permissions
+  <dxo-file-manager-item-view mode="thumbnails"> </dxo-file-manager-item-view>
+  <dxo-file-manager-permissions
     [create]="true"
     [copy]="true"
     [move]="true"
@@ -14,5 +14,5 @@
     [upload]="true"
     [download]="true"
   >
-  </dxo-permissions>
+  </dxo-file-manager-permissions>
 </dx-file-manager>

apps/demos/Demos/FileManager/Overview/Angular/app/app.component.html

@@ -4,7 +4,7 @@
   currentPath="Widescreen"
   (onSelectedFileOpened)="displayImagePopup($event)"
 >
-  <dxo-permissions
+  <dxo-file-manager-permissions
     [create]="true"
     [copy]="true"
     [move]="true"
@@ -13,7 +13,7 @@
     [upload]="true"
     [download]="true"
   >
-  </dxo-permissions>
+  </dxo-file-manager-permissions>
 </dx-file-manager>
 
 <dx-popup

apps/demos/Demos/FileManager/UICustomization/Angular/app/app.component.html

@@ -4,66 +4,89 @@
   (onContextMenuItemClick)="onItemClick($event)"
   height="450"
 >
-  <dxo-permissions
+  <dxo-file-manager-permissions
     [create]="true"
     [delete]="true"
     [rename]="true"
     [download]="true"
   >
-  </dxo-permissions>
-  <dxo-item-view [showParentFolder]="false">
-    <dxo-details>
-      <dxi-column dataField="thumbnail"></dxi-column>
-      <dxi-column dataField="name"></dxi-column>
-      <dxi-column
+  </dxo-file-manager-permissions>
+  <dxo-file-manager-item-view [showParentFolder]="false">
+    <dxo-file-manager-details>
+      <dxi-file-manager-column dataField="thumbnail"></dxi-file-manager-column>
+      <dxi-file-manager-column dataField="name"></dxi-file-manager-column>
+      <dxi-file-manager-column
         dataField="category"
         caption="Category"
         width="95"
-      ></dxi-column>
-      <dxi-column dataField="dateModified"></dxi-column>
-      <dxi-column dataField="size"></dxi-column>
-    </dxo-details>
-  </dxo-item-view>
-  <dxo-toolbar>
-    <dxi-item name="showNavPane" [visible]="true"></dxi-item>
-    <dxi-item name="separator"></dxi-item>
-    <dxi-item name="create"></dxi-item>
-    <dxi-item
+      ></dxi-file-manager-column>
+      <dxi-file-manager-column
+        dataField="dateModified"
+      ></dxi-file-manager-column>
+      <dxi-file-manager-column dataField="size"></dxi-file-manager-column>
+    </dxo-file-manager-details>
+  </dxo-file-manager-item-view>
+  <dxo-file-manager-toolbar>
+    <dxi-file-manager-item
+      name="showNavPane"
+      [visible]="true"
+    ></dxi-file-manager-item>
+    <dxi-file-manager-item name="separator"></dxi-file-manager-item>
+    <dxi-file-manager-item name="create"></dxi-file-manager-item>
+    <dxi-file-manager-item
       widget="dxMenu"
       location="before"
       [options]="newFileMenuOptions"
-    ></dxi-item>
-    <dxi-item name="refresh"></dxi-item>
-    <dxi-item name="separator" location="after"></dxi-item>
-    <dxi-item name="switchView"></dxi-item>
+    ></dxi-file-manager-item>
+    <dxi-file-manager-item name="refresh"></dxi-file-manager-item>
+    <dxi-file-manager-item
+      name="separator"
+      location="after"
+    ></dxi-file-manager-item>
+    <dxi-file-manager-item name="switchView"></dxi-file-manager-item>
 
-    <dxi-file-selection-item name="rename"></dxi-file-selection-item>
-    <dxi-file-selection-item name="separator"></dxi-file-selection-item>
-    <dxi-file-selection-item name="delete"></dxi-file-selection-item>
-    <dxi-file-selection-item name="separator"></dxi-file-selection-item>
-    <dxi-file-selection-item
+    <dxi-file-manager-file-selection-item
+      name="rename"
+    ></dxi-file-manager-file-selection-item>
+    <dxi-file-manager-file-selection-item
+      name="separator"
+    ></dxi-file-manager-file-selection-item>
+    <dxi-file-manager-file-selection-item
+      name="delete"
+    ></dxi-file-manager-file-selection-item>
+    <dxi-file-manager-file-selection-item
+      name="separator"
+    ></dxi-file-manager-file-selection-item>
+    <dxi-file-manager-file-selection-item
       widget="dxMenu"
       location="before"
       [options]="changeCategoryMenuOptions"
-    ></dxi-file-selection-item>
-    <dxi-file-selection-item name="refresh"></dxi-file-selection-item>
-    <dxi-file-selection-item name="clearSelection"></dxi-file-selection-item>
-  </dxo-toolbar>
-  <dxo-context-menu>
-    <dxi-item name="create"></dxi-item>
-    <dxi-item text="Create new file" icon="plus">
-      <dxi-item text="Text Document"></dxi-item>
-      <dxi-item text="RTF Document"></dxi-item>
-      <dxi-item text="Spreadsheet"></dxi-item>
-    </dxi-item>
-    <dxi-item name="rename" [beginGroup]="true"></dxi-item>
-    <dxi-item name="delete"></dxi-item>
-    <dxi-item text="Category" icon="tags" [beginGroup]="true">
-      <dxi-item text="Work"></dxi-item>
-      <dxi-item text="Important"></dxi-item>
-      <dxi-item text="Home"></dxi-item>
-      <dxi-item text="None"></dxi-item>
-    </dxi-item>
-    <dxi-item name="refresh"></dxi-item>
-  </dxo-context-menu>
+    ></dxi-file-manager-file-selection-item>
+    <dxi-file-manager-file-selection-item
+      name="refresh"
+    ></dxi-file-manager-file-selection-item>
+    <dxi-file-manager-file-selection-item
+      name="clearSelection"
+    ></dxi-file-manager-file-selection-item>
+  </dxo-file-manager-toolbar>
+  <dxo-file-manager-context-menu>
+    <dxi-file-manager-item name="create"></dxi-file-manager-item>
+    <dxi-file-manager-item text="Create new file" icon="plus">
+      <dxi-file-manager-item text="Text Document"></dxi-file-manager-item>
+      <dxi-file-manager-item text="RTF Document"></dxi-file-manager-item>
+      <dxi-file-manager-item text="Spreadsheet"></dxi-file-manager-item>
+    </dxi-file-manager-item>
+    <dxi-file-manager-item
+      name="rename"
+      [beginGroup]="true"
+    ></dxi-file-manager-item>
+    <dxi-file-manager-item name="delete"></dxi-file-manager-item>
+    <dxi-file-manager-item text="Category" icon="tags" [beginGroup]="true">
+      <dxi-file-manager-item text="Work"></dxi-file-manager-item>
+      <dxi-file-manager-item text="Important"></dxi-file-manager-item>
+      <dxi-file-manager-item text="Home"></dxi-file-manager-item>
+      <dxi-file-manager-item text="None"></dxi-file-manager-item>
+    </dxi-file-manager-item>
+    <dxi-file-manager-item name="refresh"></dxi-file-manager-item>
+  </dxo-file-manager-context-menu>
 </dx-file-manager>

apps/demos/Demos/Form/Grouping/Angular/app/app.component.html

@@ -3,60 +3,60 @@ <h3>Personal details</h3>
 </div>
 <div id="form-container">
   <dx-form id="form" [formData]="employee" [colCount]="2">
-    <dxi-item
+    <dxi-form-item
       itemType="group"
       captionTemplate="info"
       caption="System Information"
     >
-      <dxi-item dataField="ID"></dxi-item>
-      <dxi-item
+      <dxi-form-item dataField="ID"></dxi-form-item>
+      <dxi-form-item
         itemType="group"
         captionTemplate="user"
         caption="Main Information"
       >
-        <dxi-item dataField="FirstName"></dxi-item>
-        <dxi-item dataField="LastName"></dxi-item>
-        <dxi-item dataField="HireDate"></dxi-item>
-        <dxi-item dataField="Position"></dxi-item>
-        <dxi-item dataField="OfficeNo"></dxi-item>
-      </dxi-item>
-    </dxi-item>
-    <dxi-item
+        <dxi-form-item dataField="FirstName"></dxi-form-item>
+        <dxi-form-item dataField="LastName"></dxi-form-item>
+        <dxi-form-item dataField="HireDate"></dxi-form-item>
+        <dxi-form-item dataField="Position"></dxi-form-item>
+        <dxi-form-item dataField="OfficeNo"></dxi-form-item>
+      </dxi-form-item>
+    </dxi-form-item>
+    <dxi-form-item
       itemType="group"
       captionTemplate="personal"
       caption="Personal Data"
     >
-      <dxi-item dataField="BirthDate"></dxi-item>
-      <dxi-item
+      <dxi-form-item dataField="BirthDate"></dxi-form-item>
+      <dxi-form-item
         itemType="group"
         captionTemplate="address"
         caption="Home Address"
       >
-        <dxi-item dataField="Address"></dxi-item>
-        <dxi-item dataField="City"></dxi-item>
-        <dxi-item dataField="State"></dxi-item>
-        <dxi-item dataField="Zipcode"></dxi-item>
-      </dxi-item>
-    </dxi-item>
-    <dxi-item
+        <dxi-form-item dataField="Address"></dxi-form-item>
+        <dxi-form-item dataField="City"></dxi-form-item>
+        <dxi-form-item dataField="State"></dxi-form-item>
+        <dxi-form-item dataField="Zipcode"></dxi-form-item>
+      </dxi-form-item>
+    </dxi-form-item>
+    <dxi-form-item
       itemType="group"
       captionTemplate="contact"
       caption="Contact Information"
     >
-      <dxi-item itemType="tabbed">
-        <dxo-tab-panel-options [deferRendering]="false">
-        </dxo-tab-panel-options>
-        <dxi-tab title="Phone">
-          <dxi-item dataField="Phone"></dxi-item>
-        </dxi-tab>
-        <dxi-tab title="Skype">
-          <dxi-item dataField="Skype"></dxi-item>
-        </dxi-tab>
-        <dxi-tab title="Email">
-          <dxi-item dataField="Email"></dxi-item>
-        </dxi-tab>
-      </dxi-item>
-    </dxi-item>
+      <dxi-form-item itemType="tabbed">
+        <dxo-form-tab-panel-options [deferRendering]="false">
+        </dxo-form-tab-panel-options>
+        <dxi-form-tab title="Phone">
+          <dxi-form-item dataField="Phone"></dxi-form-item>
+        </dxi-form-tab>
+        <dxi-form-tab title="Skype">
+          <dxi-form-item dataField="Skype"></dxi-form-item>
+        </dxi-form-tab>
+        <dxi-form-tab title="Email">
+          <dxi-form-item dataField="Email"></dxi-form-item>
+        </dxi-form-tab>
+      </dxi-form-item>
+    </dxi-form-item>
 
     <ng-container *ngFor="let label of groupCaptionTemplates">
       <div *dxTemplate="let data of label.name">