last works on x-chart component ...

src/app/config/page.config.ts

@@ -5,7 +5,7 @@ import {
   toTabNavigatiorItem,
   toNavigatiorListItem,
 } from 'x-framework-components';
-import { XPage } from 'x-framework-core';
+import { toArray, XPage } from 'x-framework-core';
 import { AppResourceIDs } from './app.localization.config';
 
 //
@@ -35,32 +35,34 @@ export enum ServicesRoutes {
 }
 
 export enum ComponentsRoutes {
-  Default = 'components',
-  Components = 'components',
-  Introduction = 'introduction',
-  SmallComponents = 'small-components',
+  Ide = 'ide',
+  Fab = 'fab',
+  Map = 'map',
   Card = 'card',
   Icon = 'icon',
-  Counter = 'counter',
-  ColorPicker = 'color-picker',
-  Fab = 'fab',
-  FileComponents = 'file-components',
   Form = 'form',
   Grid = 'grid',
   List = 'list',
-  Map = 'map',
-  MarkDown = 'markdown',
   Tree = 'tree',
-  DescriptionList = 'description-list',
-  ExpandableList = 'expandable-list',
-  ExpandablePanel = 'expandable-panel',
-  ModelPresenter = 'model-presenter',
-  Slider = 'slider',
-  Stepper = 'stepper',
   Tabs = 'tabs',
-  Table = 'table',
   Page = 'page',
+  Chart = 'chart',
+  Table = 'table',
+  Slider = 'slider',
+  Counter = 'counter',
+  Stepper = 'stepper',
+  MarkDown = 'markdown',
+  Default = 'components',
+  Components = 'components',
+  ColorPicker = 'color-picker',
+  Introduction = 'introduction',
   TabNavigator = 'tab-navigator',
+  FileComponents = 'file-components',
+  ModelPresenter = 'model-presenter',
+  ExpandableList = 'expandable-list',
+  DescriptionList = 'description-list',
+  ExpandablePanel = 'expandable-panel',
+  SmallComponents = 'small-components',
 }
 
 export enum TabsRoutes {
@@ -113,7 +115,9 @@ export enum PageName {
   Components = AppRoutes.Components,
   ComponentsIntoduction = ComponentsRoutes.Introduction,
   SmallComponents = ComponentsRoutes.SmallComponents,
+  Chart = ComponentsRoutes.Chart,
   Card = ComponentsRoutes.Card,
+  Ide = ComponentsRoutes.Ide,
   Icon = ComponentsRoutes.Icon,
   Counter = ComponentsRoutes.Counter,
   ColorPicker = ComponentsRoutes.ColorPicker,
@@ -304,6 +308,28 @@ export const PageIndex: PageIndexType = {
         route: ['/', `${AppRoutes.Components}`, `${ComponentsRoutes.Icon}`],
       },
       //
+      // Chart ...
+      {
+        icon: XIconNames.stats_chart,
+        id: `${PageName.Chart}`,
+        name: `${PageName.Chart}`,
+        title: AppResourceIDs.chart,
+        baseRoute: `${ComponentsRoutes.Chart}`,
+        description: AppResourceIDs.cart_description,
+        route: ['/', `${AppRoutes.Components}`, `${ComponentsRoutes.Chart}`],
+      },
+      //
+      // Ide ...
+      {
+        icon: XIconNames.edit,
+        id: `${PageName.Ide}`,
+        name: `${PageName.Ide}`,
+        title: AppResourceIDs.ide,
+        baseRoute: `${ComponentsRoutes.Ide}`,
+        description: AppResourceIDs.ide_description,
+        route: ['/', `${AppRoutes.Components}`, `${ComponentsRoutes.Ide}`],
+      },
+      //
       // Counter ...
       {
         icon: XIconNames.list,
@@ -628,54 +654,63 @@ export const PageIndex: PageIndexType = {
 
 //
 // a Const of Available Pages ...
-export const Pages = {
+const homeChilds = toArray(PageIndex.Home.childs);
+const coreChilds = toArray(PageIndex.Core.childs);
+const tabChilds = toArray(PageIndex.TabsNav.childs);
+const themeChilds = toArray(PageIndex.Themes.childs);
+const serviceChilds = toArray(PageIndex.Services.childs);
+const componentChilds = toArray(PageIndex.Components.childs);
+export const Pages: any = {
   //
   Home: PageIndex.Home,
-  HomeIntroduction: PageIndex.Home.childs[0],
+  HomeIntroduction: homeChilds[0],
 
   //
   Core: PageIndex.Core,
-  CoreIntroduction: PageIndex.Core.childs[0],
+  CoreIntroduction: coreChilds[0],
 
   //
   Services: PageIndex.Services,
-  ServicesIntroduction: PageIndex.Services.childs[0],
+  ServicesIntroduction: serviceChilds[0],
 
   //
   Components: PageIndex.Components,
-  ComponentsIntroduction: PageIndex.Components.childs[0],
-  SmallComponents: PageIndex.Components.childs[1],
-  Card: PageIndex.Components.childs[2],
-  Icon: PageIndex.Components.childs[3],
-  Counter: PageIndex.Components.childs[4],
-  ColorPicker: PageIndex.Components.childs[5],
-  Fab: PageIndex.Components.childs[6],
-  FileUpload: PageIndex.Components.childs[7],
-  Form: PageIndex.Components.childs[8],
-  Grid: PageIndex.Components.childs[9],
-  List: PageIndex.Components.childs[10],
-  Map: PageIndex.Components.childs[11],
-  MarkDown: PageIndex.Components.childs[12],
-  Tree: PageIndex.Components.childs[13],
-  DescriptionList: PageIndex.Components.childs[14],
-  ExpandableList: PageIndex.Components.childs[15],
-  ExpandablePanel: PageIndex.Components.childs[16],
-  Slider: PageIndex.Components.childs[17],
-  Stepper: PageIndex.Components.childs[18],
-  Tabs: PageIndex.Components.childs[19],
-  Table: PageIndex.Components.childs[20],
-  Page: PageIndex.Components.childs[21],
-  TabNavigator: PageIndex.Components.childs[22],
+  ComponentsIntroduction: componentChilds[0],
+  SmallComponents: componentChilds[1],
+  Card: componentChilds[2],
+  Icon: componentChilds[3],
+  Chart: componentChilds[4],
+  Ide: componentChilds[5],
+  Counter: componentChilds[6],
+  ColorPicker: componentChilds[7],
+  Fab: componentChilds[8],
+  FileComponents: componentChilds[9],
+  Form: componentChilds[10],
+  Grid: componentChilds[11],
+  List: componentChilds[12],
+  Map: componentChilds[13],
+  MarkDown: componentChilds[14],
+  Tree: componentChilds[15],
+  DescriptionList: componentChilds[16],
+  ExpandableList: componentChilds[17],
+  ExpandablePanel: componentChilds[18],
+  ModelPresenter: componentChilds[19],
+  Slider: componentChilds[20],
+  Stepper: componentChilds[21],
+  Tabs: componentChilds[22],
+  Table: componentChilds[23],
+  Page: componentChilds[24],
+  TabNavigator: componentChilds[25],
 
   //
   TabsNav: PageIndex.TabsNav,
-  TabPage1: PageIndex.TabsNav.childs[0],
-  TabPage2: PageIndex.TabsNav.childs[1],
-  TabPage3: PageIndex.TabsNav.childs[2],
+  TabPage1: tabChilds[0],
+  TabPage2: tabChilds[1],
+  TabPage3: tabChilds[2],
 
   //
   Themes: PageIndex.Themes,
-  ThemeManager: PageIndex.Themes.childs[0],
+  ThemeManager: themeChilds[0],
 };
 
 //