Migrate Navigation/DropDowns/Editors demos to the new ng nested component syntax (#31556)

Author: dxvladislavvolkov

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

@@ -57,8 +57,11 @@
     <div class="option">
       <span>Animation duration</span>
       <dx-slider [min]="0" [max]="1000" [(value)]="accordion.animationDuration">
-        <dxo-tooltip [enabled]="true" position="bottom"></dxo-tooltip>
-        <dxo-label [visible]="true"></dxo-label>
+        <dxo-slider-tooltip
+          [enabled]="true"
+          position="bottom"
+        ></dxo-slider-tooltip>
+        <dxo-slider-label [visible]="true"></dxo-slider-label>
       </dx-slider>
     </div>
     <div class="option">

apps/demos/Demos/ActionSheet/PopoverMode/Angular/app/app.component.html

@@ -1,9 +1,9 @@
 <dx-list (onItemClick)="itemClick($event)">
-  <dxi-item *ngFor="let contact of contacts">
+  <dxi-list-item *ngFor="let contact of contacts">
     <div>{{ contact.name }}</div>
     <div>{{ contact.phone }}</div>
     <div>{{ contact.email }}</div>
-  </dxi-item>
+  </dxi-list-item>
 </dx-list>
 <dx-action-sheet
   [items]="commands"

apps/demos/Demos/Common/CustomTextEditorButtons/Angular/app/app.component.html

@@ -9,11 +9,11 @@
         stylingMode="filled"
         [(mode)]="passwordMode"
       >
-        <dxi-button
+        <dxi-text-box-button
           name="today"
           location="after"
           [options]="passwordButton"
-        ></dxi-button>
+        ></dxi-text-box-button>
       </dx-text-box>
     </div>
   </div>
@@ -27,13 +27,13 @@
         [showSpinButtons]="true"
         [inputAttr]="{ 'aria-label': 'Currency Format' }"
       >
-        <dxi-button
+        <dxi-number-box-button
           name="currency"
           location="after"
           [options]="currencyButton"
-        ></dxi-button>
-        <dxi-button name="clear"></dxi-button>
-        <dxi-button name="spins"></dxi-button>
+        ></dxi-number-box-button>
+        <dxi-number-box-button name="clear"></dxi-number-box-button>
+        <dxi-number-box-button name="spins"></dxi-number-box-button>
       </dx-number-box>
     </div>
   </div>
@@ -45,22 +45,22 @@
         [(value)]="dateValue"
         [inputAttr]="{ 'aria-label': 'Date' }"
       >
-        <dxi-button
+        <dxi-date-box-button
           name="today"
           location="before"
           [options]="todayButton"
-        ></dxi-button>
-        <dxi-button
+        ></dxi-date-box-button>
+        <dxi-date-box-button
           name="prevDate"
           location="before"
           [options]="prevDateButton"
-        ></dxi-button>
-        <dxi-button
+        ></dxi-date-box-button>
+        <dxi-date-box-button
           name="nextDate"
           location="after"
           [options]="nextDateButton"
-        ></dxi-button>
-        <dxi-button name="dropDown"></dxi-button>
+        ></dxi-date-box-button>
+        <dxi-date-box-button name="dropDown"></dxi-date-box-button>
       </dx-date-box>
     </div>
   </div>

apps/demos/Demos/Common/EditorAppearanceVariants/Angular/app/app.component.html

@@ -36,7 +36,8 @@
       [labelMode]="labelMode"
     >
       <dx-validator>
-        <dxi-validation-rule type="required"> </dxi-validation-rule>
+        <dxi-validator-validation-rule type="required">
+        </dxi-validator-validation-rule>
       </dx-validator>
     </dx-text-box>
     <dx-text-box
@@ -48,7 +49,8 @@
       [labelMode]="labelMode"
     >
       <dx-validator>
-        <dxi-validation-rule type="required"> </dxi-validation-rule>
+        <dxi-validator-validation-rule type="required">
+        </dxi-validator-validation-rule>
       </dx-validator>
     </dx-text-box>
     <dx-date-box
@@ -60,7 +62,8 @@
       [inputAttr]="{ 'aria-label': 'Hire Date' }"
     >
       <dx-validator>
-        <dxi-validation-rule type="required"> </dxi-validation-rule>
+        <dxi-validator-validation-rule type="required">
+        </dxi-validator-validation-rule>
       </dx-validator>
     </dx-date-box>
     <dx-date-box
@@ -73,7 +76,8 @@
       [inputAttr]="{ 'aria-label': 'Birth Date' }"
     >
       <dx-validator>
-        <dxi-validation-rule type="required"> </dxi-validation-rule>
+        <dxi-validator-validation-rule type="required">
+        </dxi-validator-validation-rule>
       </dx-validator>
     </dx-date-box>
     <dx-select-box
@@ -87,7 +91,8 @@
       validationMessagePosition="left"
     >
       <dx-validator>
-        <dxi-validation-rule type="required"> </dxi-validation-rule>
+        <dxi-validator-validation-rule type="required">
+        </dxi-validator-validation-rule>
       </dx-validator>
     </dx-select-box>
     <dx-text-box
@@ -100,7 +105,8 @@
       [labelMode]="labelMode"
     >
       <dx-validator>
-        <dxi-validation-rule type="required"> </dxi-validation-rule>
+        <dxi-validator-validation-rule type="required">
+        </dxi-validator-validation-rule>
       </dx-validator>
     </dx-text-box>
     <dx-date-range-box

apps/demos/Demos/DropDownBox/SingleSelection/Angular/app/app.component.html

@@ -55,10 +55,15 @@
             [(selectedRowKeys)]="gridBoxValue"
             height="100%"
           >
-            <dxo-selection mode="single"></dxo-selection>
-            <dxo-filter-row [visible]="true"></dxo-filter-row>
-            <dxo-scrolling mode="virtual"></dxo-scrolling>
-            <dxo-paging [enabled]="true" [pageSize]="10"></dxo-paging>
+            <dxo-data-grid-selection mode="single"></dxo-data-grid-selection>
+            <dxo-data-grid-filter-row
+              [visible]="true"
+            ></dxo-data-grid-filter-row>
+            <dxo-data-grid-scrolling mode="virtual"></dxo-data-grid-scrolling>
+            <dxo-data-grid-paging
+              [enabled]="true"
+              [pageSize]="10"
+            ></dxo-data-grid-paging>
           </dx-data-grid>
         </div>
       </dx-drop-down-box>

apps/demos/Demos/List/DragAndDrop/Angular/app/app.component.html

@@ -5,7 +5,7 @@
       keyExpr="id"
       [repaintChangesOnly]="true"
     >
-      <dxo-item-dragging
+      <dxo-list-item-dragging
         group="tasks"
         [data]="plannedTasks"
         [allowReordering]="true"
@@ -14,10 +14,10 @@
         [onRemove]="onRemove"
         [onReorder]="onReorder"
       >
-      </dxo-item-dragging>
+      </dxo-list-item-dragging>
     </dx-list>
     <dx-list [dataSource]="doingTasks" keyExpr="id" [repaintChangesOnly]="true">
-      <dxo-item-dragging
+      <dxo-list-item-dragging
         group="tasks"
         [data]="doingTasks"
         [allowReordering]="true"
@@ -26,7 +26,7 @@
         [onRemove]="onRemove"
         [onReorder]="onReorder"
       >
-      </dxo-item-dragging>
+      </dxo-list-item-dragging>
     </dx-list>
   </div>
 </div>

apps/demos/Demos/Lookup/Basics/Angular/app/app.component.html

@@ -6,7 +6,9 @@
       [value]="employees[0]"
       [inputAttr]="{ 'aria-label': 'Simple lookup' }"
     >
-      <dxo-drop-down-options [showTitle]="false"></dxo-drop-down-options>
+      <dxo-lookup-drop-down-options
+        [showTitle]="false"
+      ></dxo-lookup-drop-down-options>
     </dx-lookup>
   </div>
 </div>
@@ -19,8 +21,11 @@
       [grouped]="true"
       [inputAttr]="{ 'aria-label': 'Grouped lookup' }"
     >
-      <dxo-drop-down-options [hideOnOutsideClick]="true" [showTitle]="false">
-      </dxo-drop-down-options>
+      <dxo-lookup-drop-down-options
+        [hideOnOutsideClick]="true"
+        [showTitle]="false"
+      >
+      </dxo-lookup-drop-down-options>
     </dx-lookup>
   </div>
 </div>

apps/demos/Demos/Lookup/EventHandling/Angular/app/app.component.html

@@ -7,7 +7,9 @@
     [inputAttr]="{ 'aria-label': 'Lookup' }"
     (onValueChanged)="valueChanged($event)"
   >
-    <dxo-drop-down-options [showTitle]="false"></dxo-drop-down-options>
+    <dxo-lookup-drop-down-options
+      [showTitle]="false"
+    ></dxo-lookup-drop-down-options>
   </dx-lookup>
 </div>
 <div class="selected" *ngIf="selectedEmployee">

apps/demos/Demos/Lookup/Templates/Angular/app/app.component.html

@@ -10,7 +10,9 @@
       fieldTemplate="field"
       [inputAttr]="{ 'aria-label': 'Custom Field Template' }"
     >
-      <dxo-drop-down-options title="Select employee"></dxo-drop-down-options>
+      <dxo-lookup-drop-down-options
+        title="Select employee"
+      ></dxo-lookup-drop-down-options>
       <div *dxTemplate="let item of 'field'">
         <div class="custom-field">
           <img alt="{{ item.FirstName }}" src="{{ item.Picture }}" /><div
@@ -33,7 +35,9 @@
       itemTemplate="listItem"
       [inputAttr]="{ 'aria-label': 'Custom Item Template' }"
     >
-      <dxo-drop-down-options title="Select employee"></dxo-drop-down-options>
+      <dxo-lookup-drop-down-options
+        title="Select employee"
+      ></dxo-lookup-drop-down-options>
       <div *dxTemplate="let item of 'listItem'">
         <div class="custom-item">
           <img src="{{ item.Picture }}" /><div

apps/demos/Demos/RangeSelector/BackgroundImage/Angular/app/app.component.html

@@ -3,24 +3,30 @@
   [value]="[startSelectedValue, endSelectedValue]"
   title="Select a Time Period"
 >
-  <dxo-margin [top]="50" [bottom]="0"></dxo-margin>
-  <dxo-background>
-    <dxo-image
+  <dxo-range-selector-margin
+    [top]="50"
+    [bottom]="0"
+  ></dxo-range-selector-margin>
+  <dxo-range-selector-background>
+    <dxo-range-selector-image
       url="../../../../images/RangeSelector/background.png"
       location="full"
     >
-    </dxo-image>
-  </dxo-background>
-  <dxo-indent [left]="65" [right]="65"> </dxo-indent>
-  <dxo-scale
+    </dxo-range-selector-image>
+  </dxo-range-selector-background>
+  <dxo-range-selector-indent [left]="65" [right]="65">
+  </dxo-range-selector-indent>
+  <dxo-range-selector-scale
     [startValue]="startValue"
     [endValue]="endValue"
     [placeholderHeight]="20"
   >
-    <dxo-label format="shorttime"> </dxo-label>
-    <dxo-minor-tick-interval [hours]="1"> </dxo-minor-tick-interval>
-    <dxo-tick-interval [hours]="2"> </dxo-tick-interval>
-  </dxo-scale>
-  <dxo-slider-marker format="shorttime" [placeholderHeight]="30">
-  </dxo-slider-marker>
+    <dxo-range-selector-label format="shorttime"> </dxo-range-selector-label>
+    <dxo-range-selector-minor-tick-interval [hours]="1">
+    </dxo-range-selector-minor-tick-interval>
+    <dxo-range-selector-tick-interval [hours]="2">
+    </dxo-range-selector-tick-interval>
+  </dxo-range-selector-scale>
+  <dxo-range-selector-slider-marker format="shorttime" [placeholderHeight]="30">
+  </dxo-range-selector-slider-marker>
 </dx-range-selector>