WG Demos - Update editorType/widget import statements for navigation-related widget demos

apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.ts

@@ -1,12 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import {
-  DxSelectBoxModule,
-  DxTextAreaModule,
-  DxDateBoxModule,
   DxFormModule,
 } from 'devextreme-angular';
-
+import 'devextreme/ui/select_box';
+import 'devextreme/ui/text_area';
 import { Service, Employee } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -25,9 +23,6 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   imports: [
-    DxSelectBoxModule,
-    DxTextAreaModule,
-    DxDateBoxModule,
     DxFormModule,
   ],
 })

apps/demos/Demos/Common/FormsOverview/React/App.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import {
   Form, GroupItem, Label, SimpleItem,
 } from 'devextreme-react/form';
-import 'devextreme-react/text-area';
+import 'devextreme/ui/select_box';
+import 'devextreme/ui/text_area';
 
 import { employee, positions, states } from './data.ts';
 

apps/demos/Demos/Common/FormsOverview/ReactJs/App.js

@@ -2,7 +2,8 @@ import React from 'react';
 import {
   Form, GroupItem, Label, SimpleItem,
 } from 'devextreme-react/form';
-import 'devextreme-react/text-area';
+import 'devextreme/ui/select_box';
+import 'devextreme/ui/text_area';
 import { employee, positions, states } from './data.js';
 
 const birthDateOptions = { width: '100%' };

apps/demos/Demos/Common/FormsOverview/Vue/App.vue

@@ -61,7 +61,8 @@ import {
   DxGroupItem,
   DxLabel,
 } from 'devextreme-vue/form';
-import { DxTextArea } from 'devextreme-vue/text-area'; // needs for editor-type="dxTextArea"
+import 'devextreme/ui/select_box';
+import 'devextreme/ui/text_area';
 import { employee, positions, states } from './data.ts';
 
 const formData = employee;

apps/demos/Demos/Drawer/LeftOrRightPosition/React/App.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import Drawer from 'devextreme-react/drawer';
 import type { DrawerTypes } from 'devextreme-react/drawer';
 import RadioGroup from 'devextreme-react/radio-group';
+import 'devextreme/ui/button';
 import type { RadioGroupTypes } from 'devextreme-react/radio-group';
 import Toolbar from 'devextreme-react/toolbar';
 import HTMLReactParser from 'html-react-parser';

apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/App.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import Drawer from 'devextreme-react/drawer';
 import RadioGroup from 'devextreme-react/radio-group';
+import 'devextreme/ui/button';
 import Toolbar from 'devextreme-react/toolbar';
 import HTMLReactParser from 'html-react-parser';
 import { text } from './data.js';

apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue

@@ -59,6 +59,7 @@
 import { ref } from 'vue';
 import DxDrawer, { type DxDrawerTypes } from 'devextreme-vue/drawer';
 import DxRadioGroup from 'devextreme-vue/radio-group';
+import 'devextreme/ui/tag_box';
 import DxToolbar from 'devextreme-vue/toolbar';
 import NavigationList from './NavigationList.vue';
 import { text } from './data.ts';

apps/demos/Demos/Drawer/TopOrBottomPosition/React/App.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import Drawer, { type DrawerTypes } from 'devextreme-react/drawer';
 import RadioGroup, { type RadioGroupTypes } from 'devextreme-react/radio-group';
+import 'devextreme/ui/button';
 import Toolbar from 'devextreme-react/toolbar';
 import HTMLReactParser from 'html-react-parser';
 import { text } from './data.ts';

apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/App.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import Drawer from 'devextreme-react/drawer';
 import RadioGroup from 'devextreme-react/radio-group';
+import 'devextreme/ui/button';
 import Toolbar from 'devextreme-react/toolbar';
 import HTMLReactParser from 'html-react-parser';
 import { text } from './data.js';

apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue

@@ -59,6 +59,7 @@
 import { ref } from 'vue';
 import DxDrawer, { type DxDrawerTypes } from 'devextreme-vue/drawer';
 import DxRadioGroup from 'devextreme-vue/radio-group';
+import 'devextreme/ui/button';
 import DxToolbar from 'devextreme-vue/toolbar';
 import NavigationList from './NavigationList.vue';
 import { text } from './data.ts';

apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.ts

@@ -7,12 +7,12 @@ import {
   provideZoneChangeDetection,
 } from '@angular/core';
 import {
-  DxSelectBoxModule,
-  DxTextAreaModule,
   DxFormModule,
   DxFormComponent,
   DxTooltipModule,
 } from 'devextreme-angular';
+import 'devextreme/ui/select_box';
+import 'devextreme/ui/text_area';
 
 import { Employee, Service } from './app.service';
 
@@ -32,8 +32,6 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   imports: [
-    DxSelectBoxModule,
-    DxTextAreaModule,
     DxFormModule,
     DxTooltipModule,
   ],

apps/demos/Demos/Form/ItemCustomization/React/App.tsx

@@ -11,7 +11,8 @@ import type { ITextBoxOptions } from 'devextreme-react/text-box';
 import type { ISelectBoxOptions } from 'devextreme-react/select-box';
 import type { IDateBoxOptions } from 'devextreme-react/date-box';
 import type { ITextAreaOptions } from 'devextreme-react/text-area';
-import 'devextreme-react/text-area';
+import 'devextreme/ui/text_area';
+import 'devextreme/ui/select_box';
 
 import { employee, positions } from './data.ts';
 

apps/demos/Demos/Form/ItemCustomization/ReactJs/App.js

@@ -2,7 +2,8 @@ import React, { useCallback } from 'react';
 import {
   Form, Item, GroupItem, Label,
 } from 'devextreme-react/form';
-import 'devextreme-react/text-area';
+import 'devextreme/ui/text_area';
+import 'devextreme/ui/select_box';
 import { employee, positions } from './data.js';
 import LabelTemplate from './LabelTemplate.js';
 import LabelNotesTemplate from './LabelNotesTemplate.js';

apps/demos/Demos/Form/ItemCustomization/Vue/App.vue

@@ -121,7 +121,8 @@ import {
 } from 'devextreme-vue/form';
 import { type ValidationRule } from 'devextreme-vue/common';
 import service from './data.ts';
-import 'devextreme-vue/text-area';
+import 'devextreme/ui/text_area';
+import 'devextreme/ui/select_box';
 
 import LabelTemplate from './LabelTemplate.vue';
 import LabelNotesTemplate from './LabelNotesTemplate.vue';

apps/demos/Demos/Form/UpdateItemsDynamically/React/App.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import 'devextreme-react/text-area';
 import Form, {
   GroupItem,
   SimpleItem,

apps/demos/Demos/Form/UpdateItemsDynamically/ReactJs/App.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import 'devextreme-react/text-area';
 import Form, {
   GroupItem, SimpleItem, Label, ButtonItem,
 } from 'devextreme-react/form';

apps/demos/Demos/Form/Validation/Angular/app/app.component.ts

@@ -6,10 +6,7 @@ import {
   provideZoneChangeDetection,
 } from '@angular/core';
 import {
-  DxCheckBoxModule,
-  DxSelectBoxModule,
   DxNumberBoxModule,
-  DxAutocompleteModule,
 } from 'devextreme-angular';
 import notify from 'devextreme/ui/notify';
 import Validator from 'devextreme/ui/validator';
@@ -19,6 +16,9 @@ import { DxTextBoxTypes } from 'devextreme-angular/ui/text-box';
 import { DxDateBoxTypes } from 'devextreme-angular/ui/date-box';
 import { DxDateRangeBoxTypes } from 'devextreme-angular/ui/date-range-box';
 import { DxButtonModule, DxButtonTypes } from 'devextreme-angular/ui/button';
+import 'devextreme/ui/date_range_box';
+import 'devextreme/ui/select_box';
+import 'devextreme/ui/autocomplete';
 import { Customer, Service } from './app.service';
 
 type EditorOptions = DxTextBoxTypes.Properties;
@@ -48,11 +48,8 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   imports: [
-    DxCheckBoxModule,
-    DxSelectBoxModule,
     DxNumberBoxModule,
     DxButtonModule,
-    DxAutocompleteModule,
     DxFormModule,
   ],
 })

apps/demos/Demos/Form/Validation/React/App.tsx

@@ -23,7 +23,8 @@ import type { IDateRangeBoxOptions } from 'devextreme-react/date-range-box';
 import notify from 'devextreme/ui/notify';
 import Validator from 'devextreme/ui/validator';
 import 'devextreme-react/autocomplete';
-import 'devextreme-react/date-range-box';
+import 'devextreme/ui/date_range_box';
+import 'devextreme/ui/select_box';
 import { customer, cities, countries } from './data.ts';
 
 const checkBoxOptions = {

apps/demos/Demos/Form/Validation/ReactJs/App.js

@@ -16,7 +16,8 @@ import Form, {
 import notify from 'devextreme/ui/notify';
 import Validator from 'devextreme/ui/validator';
 import 'devextreme-react/autocomplete';
-import 'devextreme-react/date-range-box';
+import 'devextreme/ui/date_range_box';
+import 'devextreme/ui/select_box';
 import { customer, cities, countries } from './data.js';
 
 const checkBoxOptions = {

apps/demos/Demos/Form/Validation/Vue/App.vue

@@ -179,8 +179,9 @@ import DxForm, {
   DxCustomRule,
   type DxFormTypes,
 } from 'devextreme-vue/form';
-import DxAutocomplete from 'devextreme-vue/autocomplete'; // for editor-type=dxAutocomplete
-import 'devextreme-vue/date-range-box';
+import 'devextreme/ui/autocomplete';
+import 'devextreme/ui/date_range_box';
+import 'devextreme/ui/select_box';
 import notify from 'devextreme/ui/notify';
 import Validator from 'devextreme/ui/validator';
 import service from './data.ts';

apps/demos/Demos/Stepper/FormIntegration/Angular/app/additional-form/additional-form.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-import { DxFormModule, DxTextAreaModule } from 'devextreme-angular';
+import { DxFormModule } from 'devextreme-angular';
+import 'devextreme/ui/text_area';
 import { type DxFormTypes } from 'devextreme-angular/ui/form';
 import { type DxTextAreaTypes } from 'devextreme-angular/ui/text-area';
 import type { BookingFormData } from '../app.types';
@@ -15,7 +16,6 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/additional-form/additional-form.component.html`,
   imports: [
     DxFormModule,
-    DxTextAreaModule,
   ],
 })
 export class AdditionalFormComponent {

apps/demos/Demos/Stepper/FormIntegration/Angular/app/dates-form/dates-form.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, SimpleChanges, ViewChild } from '@angular/core';
-import { DxFormModule, DxDateRangeBoxModule } from 'devextreme-angular';
+import { DxFormModule } from 'devextreme-angular';
 import { DxFormComponent, type DxFormTypes } from 'devextreme-angular/ui/form';
+import 'devextreme/ui/date_range_box';
 import { type DxDateRangeBoxTypes } from 'devextreme-angular/ui/date-range-box';
 import type { BookingFormData } from '../app.types';
 
@@ -15,7 +16,6 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/dates-form/dates-form.component.html`,
   imports: [
     DxFormModule,
-    DxDateRangeBoxModule,
   ],
 })
 export class DatesFormComponent {

apps/demos/Demos/Stepper/FormIntegration/Angular/app/guests-form/guests-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, SimpleChanges, ViewChild } from '@angular/core';
-import { DxFormModule, DxNumberBoxModule } from 'devextreme-angular';
+import { DxFormModule } from 'devextreme-angular';
 import { DxFormComponent, type DxFormTypes } from 'devextreme-angular/ui/form';
 import { type DxNumberBoxTypes } from 'devextreme-angular/ui/number-box';
 import type { BookingFormData } from '../app.types';
@@ -15,7 +15,6 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/guests-form/guests-form.component.html`,
   imports: [
     DxFormModule,
-    DxNumberBoxModule,
   ],
 })
 export class GuestsFormComponent {

apps/demos/Demos/Stepper/FormIntegration/React/AdditionalForm.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import type { FC } from 'react';
-import 'devextreme-react/text-area';
+import 'devextreme/ui/text_area';
 import { Form, SimpleItem } from 'devextreme-react/form';
 
 import type { FormProps } from './types.ts';

apps/demos/Demos/Stepper/FormIntegration/React/DatesForm.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import type { FC } from 'react';
-import 'devextreme-react/date-range-box';
+import 'devextreme/ui/date_range_box';
 import { Form, SimpleItem } from 'devextreme-react/form';
 
 import type { FormProps } from './types.ts';

apps/demos/Demos/Stepper/FormIntegration/React/GuestsForm.tsx

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 import type { FC } from 'react';
 import { Form, RangeRule, SimpleItem } from 'devextreme-react/form';
-import 'devextreme-react/number-box';
 
 import type { FormProps } from './types.ts';
 

apps/demos/Demos/Stepper/FormIntegration/ReactJs/AdditionalForm.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import 'devextreme-react/text-area';
+import 'devextreme/ui/text_area';
 import { Form, SimpleItem } from 'devextreme-react/form';
 
 const AdditionalForm = memo(({ formData }) => (

apps/demos/Demos/Stepper/FormIntegration/ReactJs/DatesForm.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import 'devextreme-react/date-range-box';
+import 'devextreme/ui/date_range_box';
 import { Form, SimpleItem } from 'devextreme-react/form';
 
 const DatesForm = memo(({ formData, validationGroup }) => (

apps/demos/Demos/Stepper/FormIntegration/ReactJs/GuestsForm.js

@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import { Form, RangeRule, SimpleItem } from 'devextreme-react/form';
-import 'devextreme-react/number-box';
 
 const GuestsForm = memo(({ formData, validationGroup }) => (
   <>

apps/demos/Demos/Stepper/FormIntegration/Vue/AdditionalTemplate.vue

@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { DxForm, DxSimpleItem } from 'devextreme-vue/form';
-import 'devextreme-vue/text-area';
+import 'devextreme/ui/text_area';
 import type { BookingFormData } from './types.ts';
 import { initialFormData } from './data.ts';
 

apps/demos/Demos/Stepper/FormIntegration/Vue/DatesTemplate.vue

@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import DxForm, { DxSimpleItem } from 'devextreme-vue/form';
-import 'devextreme-vue/date-range-box';
+import 'devextreme/ui/date_range_box';
 import { ref, watch } from 'vue';
 import type { BookingFormData } from './types.ts';
 import { getInitialFormData } from './data.ts';

apps/demos/Demos/Stepper/FormIntegration/Vue/GuestsTemplate.vue

@@ -36,7 +36,6 @@
 
 <script setup lang="ts">
 import { DxForm, DxRangeRule, DxSimpleItem } from 'devextreme-vue/form';
-import 'devextreme-vue/number-box';
 import { watch, ref } from 'vue';
 import type { BookingFormData } from './types.ts';
 import { getInitialFormData } from './data.ts';

apps/demos/Demos/Toolbar/Overview/Angular/app/app.component.ts

@@ -1,6 +1,8 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { DxListModule, DxToolbarModule, DxSelectBoxModule } from 'devextreme-angular';
+import { DxListModule, DxToolbarModule } from 'devextreme-angular';
+import 'devextreme/ui/select_box';
+import 'devextreme/ui/button';
 import { DataSource } from 'devextreme-angular/common/data';
 import notify from 'devextreme/ui/notify';
 import type { DxButtonTypes } from 'devextreme-angular/ui/button';
@@ -25,7 +27,6 @@ if (window && window.config?.packageConfigPaths) {
   imports: [
     DxListModule,
     DxToolbarModule,
-    DxSelectBoxModule,
   ],
 })
 export class AppComponent {

apps/demos/Demos/Toolbar/Overview/React/App.tsx

@@ -5,6 +5,7 @@ import List from 'devextreme-react/list';
 
 import { DataSource } from 'devextreme-react/common/data';
 import notify from 'devextreme/ui/notify';
+import 'devextreme/ui/button';
 import 'devextreme/ui/select_box';
 import type { SelectBoxTypes } from 'devextreme-react/select-box';
 

apps/demos/Demos/Toolbar/Overview/ReactJs/App.js

@@ -3,6 +3,7 @@ import Toolbar, { Item } from 'devextreme-react/toolbar';
 import List from 'devextreme-react/list';
 import { DataSource } from 'devextreme-react/common/data';
 import notify from 'devextreme/ui/notify';
+import 'devextreme/ui/button';
 import 'devextreme/ui/select_box';
 import { productTypes, products } from './data.js';
 

apps/demos/Demos/Toolbar/Overview/Vue/App.vue

@@ -56,6 +56,7 @@ import DxToolbar, { DxItem } from 'devextreme-vue/toolbar';
 import DxList from 'devextreme-vue/list';
 import { DataSource } from 'devextreme-vue/common/data';
 import notify from 'devextreme/ui/notify';
+import 'devextreme/ui/button';
 import 'devextreme/ui/select_box';
 import { productTypes, products } from './data.ts';