Devextreme-angular. Rework nested items (T1300985) (#31202)

Author: GoodDayForSurf

apps/demos/configs/Angular/config.bundle.js

@@ -41,6 +41,7 @@ const bundleConfig = {
       'devextreme-angular/common/core/*',
       'devextreme-angular/common/export/*',
       'devextreme-angular/core/*',
+      'devextreme-angular/core/tokens/*',
       'devexpress-gantt',
       'devexpress-diagram',
       'rxjs/*',

apps/demos/configs/Angular/config.js

@@ -196,6 +196,7 @@ window.config = {
     'devextreme-angular/common/grids': 'bundles:devextreme-angular/devextreme-angular-common-grids.umd.js',
     'devextreme-angular/common': 'bundles:devextreme-angular/devextreme-angular-common.umd.js',
     'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js',
+    'devextreme-angular/core/tokens': 'bundles:devextreme-angular/devextreme-angular-core-tokens.umd.js',
     ...componentNames.reduce((acc, name) => {
       acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`;
       acc[`devextreme-angular/ui/${name}/nested`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}-nested.umd.js`;

apps/demos/rollup.devextreme-angular.umd.config.mjs

@@ -16,6 +16,7 @@ const inputs = {
     'devextreme-angular': `${baseDir}devextreme-angular.mjs`,
     'devextreme-angular-core': `${baseDir}devextreme-angular-core.mjs`,
     'devextreme-angular-http': `${baseDir}devextreme-angular-http.mjs`,
+    'devextreme-angular-core-tokens': `${baseDir}devextreme-angular-core-tokens.mjs`,
     ...fileNames.reduce((acc, name) => {
         acc[name] = `${baseDir}${name}.mjs`;
 

apps/demos/utils/bundle/index.js

@@ -146,6 +146,7 @@ const prepareConfigs = (framework)=> {
       additionPaths = {
         'devextreme-angular': `${bundlesRoot}/devextreme-angular.umd.js`,
         'devextreme-angular/core': `${bundlesRoot}/devextreme-angular-core.umd.js`,
+        'devextreme-angular/core/tokens': `${bundlesRoot}/devextreme-angular-core-tokens.umd.js`,
         ...componentNames.reduce((items, item) => {
           // eslint-disable-next-line no-param-reassign
           items[`devextreme-angular/ui/${item.replace('-nested', '/nested')}`] = `${bundlesRoot}/devextreme-angular-ui-${item}.umd.js`;

packages/devextreme-angular/src/core/tokens/index.ts

@@ -0,0 +1,43 @@
+import { InjectionToken } from '@angular/core';
+
+export const PROPERTY_TOKEN_items = new InjectionToken<string>('property-token-items');
+export const PROPERTY_TOKEN_buttons = new InjectionToken<string>('property-token-buttons');
+export const PROPERTY_TOKEN_toolbarItems = new InjectionToken<string>('property-token-toolbarItems');
+export const PROPERTY_TOKEN_validationRules = new InjectionToken<string>('property-token-validationRules');
+export const PROPERTY_TOKEN_changes = new InjectionToken<string>('property-token-changes');
+export const PROPERTY_TOKEN_columns = new InjectionToken<string>('property-token-columns');
+export const PROPERTY_TOKEN_customOperations = new InjectionToken<string>('property-token-customOperations');
+export const PROPERTY_TOKEN_fields = new InjectionToken<string>('property-token-fields');
+export const PROPERTY_TOKEN_tabs = new InjectionToken<string>('property-token-tabs');
+export const PROPERTY_TOKEN_annotations = new InjectionToken<string>('property-token-annotations');
+export const PROPERTY_TOKEN_breaks = new InjectionToken<string>('property-token-breaks');
+export const PROPERTY_TOKEN_constantLines = new InjectionToken<string>('property-token-constantLines');
+export const PROPERTY_TOKEN_panes = new InjectionToken<string>('property-token-panes');
+export const PROPERTY_TOKEN_series = new InjectionToken<string>('property-token-series');
+export const PROPERTY_TOKEN_strips = new InjectionToken<string>('property-token-strips');
+export const PROPERTY_TOKEN_valueAxis = new InjectionToken<string>('property-token-valueAxis');
+export const PROPERTY_TOKEN_alerts = new InjectionToken<string>('property-token-alerts');
+export const PROPERTY_TOKEN_typingUsers = new InjectionToken<string>('property-token-typingUsers');
+export const PROPERTY_TOKEN_ranges = new InjectionToken<string>('property-token-ranges');
+export const PROPERTY_TOKEN_groupItems = new InjectionToken<string>('property-token-groupItems');
+export const PROPERTY_TOKEN_sortByGroupSummaryInfo = new InjectionToken<string>('property-token-sortByGroupSummaryInfo');
+export const PROPERTY_TOKEN_totalItems = new InjectionToken<string>('property-token-totalItems');
+export const PROPERTY_TOKEN_commands = new InjectionToken<string>('property-token-commands');
+export const PROPERTY_TOKEN_connectionPoints = new InjectionToken<string>('property-token-connectionPoints');
+export const PROPERTY_TOKEN_customShapes = new InjectionToken<string>('property-token-customShapes');
+export const PROPERTY_TOKEN_groups = new InjectionToken<string>('property-token-groups');
+export const PROPERTY_TOKEN_fileSelectionItems = new InjectionToken<string>('property-token-fileSelectionItems');
+export const PROPERTY_TOKEN_stripLines = new InjectionToken<string>('property-token-stripLines');
+export const PROPERTY_TOKEN_mentions = new InjectionToken<string>('property-token-mentions');
+export const PROPERTY_TOKEN_menuItems = new InjectionToken<string>('property-token-menuItems');
+export const PROPERTY_TOKEN_locations = new InjectionToken<string>('property-token-locations');
+export const PROPERTY_TOKEN_markers = new InjectionToken<string>('property-token-markers');
+export const PROPERTY_TOKEN_routes = new InjectionToken<string>('property-token-routes');
+export const PROPERTY_TOKEN_cols = new InjectionToken<string>('property-token-cols');
+export const PROPERTY_TOKEN_location = new InjectionToken<string>('property-token-location');
+export const PROPERTY_TOKEN_rows = new InjectionToken<string>('property-token-rows');
+export const PROPERTY_TOKEN_resources = new InjectionToken<string>('property-token-resources');
+export const PROPERTY_TOKEN_views = new InjectionToken<string>('property-token-views');
+export const PROPERTY_TOKEN_layers = new InjectionToken<string>('property-token-layers');
+export const PROPERTY_TOKEN_legends = new InjectionToken<string>('property-token-legends');
+export const PROPERTY_TOKEN_center = new InjectionToken<string>('property-token-center');

packages/devextreme-angular/src/core/tokens/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

packages/devextreme-angular/src/ui/accordion/index.ts

@@ -38,16 +38,16 @@ import {
     DxTemplateModule,
     NestedOptionHost,
     IterableDifferHelper,
-    WatcherHelper
+    WatcherHelper,
+    CollectionNestedOption,
 } from 'devextreme-angular/core';
 
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
 
 import { DxiAccordionItemModule } from 'devextreme-angular/ui/accordion/nested';
-
-import { DxiItemComponent } from 'devextreme-angular/ui/nested';
-
-import { DxiAccordionItemComponent } from 'devextreme-angular/ui/accordion/nested';
+import { 
+           PROPERTY_TOKEN_items,
+     } from 'devextreme-angular/core/tokens';
 
 
 /**
@@ -68,6 +68,12 @@ import { DxiAccordionItemComponent } from 'devextreme-angular/ui/accordion/neste
     ]
 })
 export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
+
+    @ContentChildren(PROPERTY_TOKEN_items)
+    set _itemsContentChildren(value: QueryList<CollectionNestedOption>) {
+        this.setChildren('items', value);
+    }
+
     instance: DxAccordion<TItem, TKey> = null;
 
     /**
@@ -712,26 +718,6 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
 
 
 
-    @ContentChildren(DxiAccordionItemComponent)
-    get itemsChildren(): QueryList<DxiAccordionItemComponent> {
-        return this._getOption('items');
-    }
-    set itemsChildren(value) {
-        this._setChildren('items', value, 'DxiAccordionItemComponent');
-    }
-
-
-    @ContentChildren(DxiItemComponent)
-    get itemsLegacyChildren(): QueryList<DxiItemComponent> {
-        return this._getOption('items');
-    }
-    set itemsLegacyChildren(value) {
-        this._setChildren('items', value, 'DxiItemComponent');
-    }
-
-
-
-
     constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,
             private _watcherHelper: WatcherHelper,
             private _idh: IterableDifferHelper,

packages/devextreme-angular/src/ui/accordion/nested/item-dxi.ts

@@ -23,18 +23,26 @@ import {
     extractTemplate,
     DxTemplateDirective,
     IDxTemplateHost,
-    DxTemplateHost
+    DxTemplateHost,
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
 
+import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens';
 
 @Component({
     selector: 'dxi-accordion-item',
     standalone: true,
     template: '<ng-content></ng-content>',
     styles: [':host { display: block; }'],
     imports: [ DxIntegrationModule ],
-    providers: [NestedOptionHost, DxTemplateHost]
+    providers: [
+        NestedOptionHost,
+        DxTemplateHost,
+        {
+           provide: PROPERTY_TOKEN_items,
+           useExisting: DxiAccordionItemComponent,
+        }
+    ]
 })
 export class DxiAccordionItemComponent extends CollectionNestedOption implements AfterViewInit,
     IDxTemplateHost {

packages/devextreme-angular/src/ui/action-sheet/index.ts

@@ -38,16 +38,16 @@ import {
     DxTemplateModule,
     NestedOptionHost,
     IterableDifferHelper,
-    WatcherHelper
+    WatcherHelper,
+    CollectionNestedOption,
 } from 'devextreme-angular/core';
 
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
 
 import { DxiActionSheetItemModule } from 'devextreme-angular/ui/action-sheet/nested';
-
-import { DxiItemComponent } from 'devextreme-angular/ui/nested';
-
-import { DxiActionSheetItemComponent } from 'devextreme-angular/ui/action-sheet/nested';
+import { 
+           PROPERTY_TOKEN_items,
+     } from 'devextreme-angular/core/tokens';
 
 
 /**
@@ -68,6 +68,12 @@ import { DxiActionSheetItemComponent } from 'devextreme-angular/ui/action-sheet/
     ]
 })
 export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
+
+    @ContentChildren(PROPERTY_TOKEN_items)
+    set _itemsContentChildren(value: QueryList<CollectionNestedOption>) {
+        this.setChildren('items', value);
+    }
+
     instance: DxActionSheet<TItem, TKey> = null;
 
     /**
@@ -504,26 +510,6 @@ export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent
 
 
 
-    @ContentChildren(DxiActionSheetItemComponent)
-    get itemsChildren(): QueryList<DxiActionSheetItemComponent> {
-        return this._getOption('items');
-    }
-    set itemsChildren(value) {
-        this._setChildren('items', value, 'DxiActionSheetItemComponent');
-    }
-
-
-    @ContentChildren(DxiItemComponent)
-    get itemsLegacyChildren(): QueryList<DxiItemComponent> {
-        return this._getOption('items');
-    }
-    set itemsLegacyChildren(value) {
-        this._setChildren('items', value, 'DxiItemComponent');
-    }
-
-
-
-
     constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,
             private _watcherHelper: WatcherHelper,
             private _idh: IterableDifferHelper,

packages/devextreme-angular/src/ui/action-sheet/nested/item-dxi.ts

@@ -25,18 +25,26 @@ import {
     extractTemplate,
     DxTemplateDirective,
     IDxTemplateHost,
-    DxTemplateHost
+    DxTemplateHost,
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
 
+import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens';
 
 @Component({
     selector: 'dxi-action-sheet-item',
     standalone: true,
     template: '<ng-content></ng-content>',
     styles: [':host { display: block; }'],
     imports: [ DxIntegrationModule ],
-    providers: [NestedOptionHost, DxTemplateHost]
+    providers: [
+        NestedOptionHost,
+        DxTemplateHost,
+        {
+           provide: PROPERTY_TOKEN_items,
+           useExisting: DxiActionSheetItemComponent,
+        }
+    ]
 })
 export class DxiActionSheetItemComponent extends CollectionNestedOption implements AfterViewInit,
     IDxTemplateHost {