last works on x-chart component ...

package.json

@@ -110,9 +110,9 @@
     "shx": "^0.3.3",
     "typescript": "~4.3.5",
     "uuid": "^8.3.2",
-    "x-framework-components": "file:../Documents/pack/x-framework-components-0.0.1.tgz",
     "x-framework-core": "file:../Documents/pack/x-framework-core-0.0.1.tgz",
-    "x-framework-services": "file:../Documents/pack/x-framework-services-0.0.1.tgz"
+    "x-framework-services": "file:../Documents/pack/x-framework-services-0.0.1.tgz",
+    "x-framework-components": "file:../Documents/pack/x-framework-components-0.0.1.tgz"
   },
   "cordova": {
     "plugins": {

src/app/config/app.localization.config.ts

@@ -183,6 +183,18 @@ export enum AppResourceIDs {
   icon_list = 'icon_list',
   //#endregion
 
+  //
+  //#region Ide ...
+  ide = 'ide',
+  ide_description = 'ide_description',
+  //#endregion
+
+  //
+  //#region Chart ...
+  chart = 'chart',
+  cart_description = 'cart_description',
+  //#endregion
+
   //
   //#region Counter ...
   counter = 'counter',
@@ -739,6 +751,30 @@ export const FaCustomLocales: XTranslationItem[] = [
   },
   //#endregion
 
+  //
+  //#region Ide ...
+  {
+    id: 'ide',
+    value: 'ویرایشگر کد',
+  },
+  {
+    id: 'ide_description',
+    value: 'مستندات مربوط به ویرایشگر کد',
+  },
+  //#endregion
+
+  //
+  //#region Ide ...
+  {
+    id: 'chart',
+    value: 'نمودار',
+  },
+  {
+    id: 'chart_description',
+    value: 'مستندات مربوط به مولفه نمودار',
+  },
+  //#endregion
+
   //
   //#region Counter ...
   {
@@ -1495,6 +1531,30 @@ export const EnCustomLocales: XTranslationItem[] = [
   },
   //#endregion
 
+  //
+  //#region Ide ...
+  {
+    id: 'ide',
+    value: 'Ide',
+  },
+  {
+    id: 'ide_description',
+    value: 'Ide Component Documentation',
+  },
+  //#endregion
+
+  //
+  //#region Ide ...
+  {
+    id: 'chart',
+    value: 'Chart Component',
+  },
+  {
+    id: 'chart_description',
+    value: 'Chart Component Documentation',
+  },
+  //#endregion
+
   //
   //#region Counter ...
   {

src/app/config/localization.config.ts

@@ -550,6 +550,18 @@ export const AvailableTranslationResources: XLanguageDescriptor[] = [
       },
       //#endregion
 
+      //
+      //#region Additionals ...
+      {
+        id: 'ide_mode',
+        value: 'نوع کد',
+      },
+      {
+        id: 'ide_format',
+        value: 'حالت دهی کد',
+      },
+      //#endregion
+
       //
       // Custom Translations ...
       ...FaCustomLocales,
@@ -1104,6 +1116,18 @@ export const AvailableTranslationResources: XLanguageDescriptor[] = [
       },
       //#endregion
 
+      //
+      //#region Additionals ...
+      {
+        id: 'ide_mode',
+        value: 'Code Style',
+      },
+      {
+        id: 'ide_format',
+        value: 'Code Frormatting',
+      },
+      //#endregion
+
       //
       // Custom Translations ...
       ...EnCustomLocales,

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',
+  Ide = 'ide',
-  Components = 'components',
+  Fab = 'fab',
-  Introduction = 'introduction',
+  Map = 'map',
-  SmallComponents = 'small-components',
   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],
+  ComponentsIntroduction: componentChilds[0],
-  SmallComponents: PageIndex.Components.childs[1],
+  SmallComponents: componentChilds[1],
-  Card: PageIndex.Components.childs[2],
+  Card: componentChilds[2],
-  Icon: PageIndex.Components.childs[3],
+  Icon: componentChilds[3],
-  Counter: PageIndex.Components.childs[4],
+  Chart: componentChilds[4],
-  ColorPicker: PageIndex.Components.childs[5],
+  Ide: componentChilds[5],
-  Fab: PageIndex.Components.childs[6],
+  Counter: componentChilds[6],
-  FileUpload: PageIndex.Components.childs[7],
+  ColorPicker: componentChilds[7],
-  Form: PageIndex.Components.childs[8],
+  Fab: componentChilds[8],
-  Grid: PageIndex.Components.childs[9],
+  FileComponents: componentChilds[9],
-  List: PageIndex.Components.childs[10],
+  Form: componentChilds[10],
-  Map: PageIndex.Components.childs[11],
+  Grid: componentChilds[11],
-  MarkDown: PageIndex.Components.childs[12],
+  List: componentChilds[12],
-  Tree: PageIndex.Components.childs[13],
+  Map: componentChilds[13],
-  DescriptionList: PageIndex.Components.childs[14],
+  MarkDown: componentChilds[14],
-  ExpandableList: PageIndex.Components.childs[15],
+  Tree: componentChilds[15],
-  ExpandablePanel: PageIndex.Components.childs[16],
+  DescriptionList: componentChilds[16],
-  Slider: PageIndex.Components.childs[17],
+  ExpandableList: componentChilds[17],
-  Stepper: PageIndex.Components.childs[18],
+  ExpandablePanel: componentChilds[18],
-  Tabs: PageIndex.Components.childs[19],
+  ModelPresenter: componentChilds[19],
-  Table: PageIndex.Components.childs[20],
+  Slider: componentChilds[20],
-  Page: PageIndex.Components.childs[21],
+  Stepper: componentChilds[21],
-  TabNavigator: PageIndex.Components.childs[22],
+  Tabs: componentChilds[22],
+  Table: componentChilds[23],
+  Page: componentChilds[24],
+  TabNavigator: componentChilds[25],
 
   //
   TabsNav: PageIndex.TabsNav,
-  TabPage1: PageIndex.TabsNav.childs[0],
+  TabPage1: tabChilds[0],
-  TabPage2: PageIndex.TabsNav.childs[1],
+  TabPage2: tabChilds[1],
-  TabPage3: PageIndex.TabsNav.childs[2],
+  TabPage3: tabChilds[2],
 
   //
   Themes: PageIndex.Themes,
-  ThemeManager: PageIndex.Themes.childs[0],
+  ThemeManager: themeChilds[0],
 };
 
 //

src/app/pages/components/chart/chart.page.html

@@ -0,0 +1,37 @@
+<v-page
+  [hasSide]="true"
+  [toolbarTitle]="toolbarTitle"
+  [toolbarSubTitle]="toolbarSubTitle"
+  [toolbarShowSubTitle]="toolbarShowSubTitle"
+>
+  <!-- Content -->
+  <x-card [isInPage]="true" [showActions]="true" [color]="ColorNames.Light">
+    <!-- Content -->
+    <x-markdown
+      [mode]="'preview'"
+      [hasToolbar]="false"
+      [content]="getContent('content')"
+    ></x-markdown>
+
+    <!-- Sample -->
+    <x-markdown
+      [mode]="'preview'"
+      [content]="sample1"
+      [hasToolbar]="false"
+      [cssClass]="'code-block'"
+    ></x-markdown>
+  </x-card>
+
+  <!-- Component -->
+  <x-chart
+    class="v-card"
+    [type]="'bar'"
+    [isInPage]="true"
+    [cardTitle]="'Chart'"
+    [wrapWithCard]="true"
+    [series]="chartSeries"
+    [options]="chartOptions"
+    (chartRendered)="onChartReady()"
+  >
+  </x-chart>
+</v-page>

src/app/pages/components/chart/chart.page.ts

@@ -0,0 +1,143 @@
+import { Component, ViewChild } from '@angular/core';
+import { isNullOrEmptyString } from 'x-framework-core';
+import { VPageComponent } from '../../../views/v-page/v-page.component';
+import { AppResourceIDs } from 'src/app/config/app.localization.config';
+import { XChartOptions, XChartSeriesType } from 'x-framework-components';
+
+@Component({
+  selector: 'app-chart',
+  templateUrl: './chart.page.html',
+  styleUrls: ['./chart.page.scss'],
+})
+export class ChartPage extends VPageComponent {
+  //
+  //#region Props ...
+  toolbarShowSubTitle = true;
+  titleRes = AppResourceIDs.form;
+  toolbarTitle = this.resourceProvider(this.titleRes);
+  toolbarSubTitle = this.resourceProvider(AppResourceIDs.form_description);
+
+  readonly contentFa = `
+  # ${this.toolbarTitle}
+
+  این مولفه جهت نمایش انواع چارت های مختلف در برنامه ها بکار می رود ...
+  `;
+  readonly contentEn = `
+  # ${this.toolbarTitle}
+
+  this Component used for draw Charts on Applications ...
+  `;
+
+  readonly sample1 =
+    '```html' +
+    `
+<x-chart
+  [series]="props.series"
+  [options]="props.options"
+  [cssClass]="props.cssClass"
+  [isInPage]="props.isInPage"
+  [cardColor]="props.cardColor"
+  [cardTitle]="props.cardTitle"
+  [autoUpdate]="props.autoUpdate"
+  (zoomed)="props.zoomed($event)"
+  [wrapWithCard]="props.wrapWithCard"
+  [cardCssClass]="props.cardCssClass"
+  [cardSubTitle]="props.cardSubTitle"
+  [cardShowFooter]="props.cardShowFooter"
+  [actionProvider]="props.actionProvider"
+  [cardShowActions]="props.cardShowActions"
+  (chartRendered)="props.chartRendered($event)"
+  [cardActionProvider]="props.cardActionProvider"
+  [cardForegroundColor]="props.cardForegroundColor"
+  (dataPointSelected)="props.dataPointSelected($event)"
+>
+</x-chart>
+` +
+    '```';
+
+  //
+  chartSeries: XChartSeriesType = [
+    {
+      name: 'فروش',
+      data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
+    },
+  ];
+
+  //
+  chartOptions: XChartOptions = {
+    chart: {
+      type: 'line',
+      height: 350,
+      fontFamily: 'Vazirmatn, sans-serif', // فونت فارسی
+      toolbar: { show: true },
+    },
+    xaxis: {
+      categories: [
+        'فروردین',
+        'اردیبهشت',
+        'خرداد',
+        'تیر',
+        'مرداد',
+        'شهریور',
+        'مهر',
+        'آبان',
+        'آذر',
+      ],
+    },
+    stroke: { curve: 'smooth', width: 3 },
+    markers: { size: 5 },
+    title: {
+      text: 'نمودار فروش ماهانه',
+      align: 'center',
+      style: { fontSize: '16px', fontWeight: 'bold' },
+    },
+    tooltip: { theme: 'dark' },
+    dataLabels: { enabled: false },
+  };
+  //#endregion
+
+  //
+  //#region UI Providers ...
+  /**
+   * read specified variable content based on current locale ...
+   *
+   * @param title which var can read ...
+   *
+   * @returns string content ...
+   */
+  getContent(title: string) {
+    //
+    if (isNullOrEmptyString(title)) {
+      return '';
+    }
+
+    //
+    const currentLocale = this.managerService.currentLocale;
+
+    //
+    const varName =
+      title +
+      (currentLocale === 'en-US'
+        ? 'En'
+        : currentLocale === 'fa-IR'
+          ? 'Fa'
+          : '');
+
+    const result = (this as any)[`${varName}`];
+
+    //
+    return result || '';
+  }
+  //#endregion
+
+  //
+  //#region UI Handlers ...
+  async onChartReady() {
+    // //
+    // await this.managerService.notificationService.presentSuccessNotification({
+    //   message: this.resourceProvider(AppResourceIDs.temp_label),
+    //   dissmissable: true,
+    // });
+  }
+  //#endregion
+}

src/app/pages/components/components.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { FabPage } from './fab/fab.page';
 import { MapPage } from './map/map.page';
+import { IdePage } from './ide/ide.page';
 import { FormPage } from './form/form.page';
 import { GridPage } from './grid/grid.page';
 import { ListPage } from './list/list.page';
@@ -8,6 +9,7 @@ import { IconPage } from './icon/icon.page';
 import { CardPage } from './card/card.page';
 import { PagePage } from './page/page.page';
 import { TabsPage } from './tabs/tabs.page';
+import { TreePage } from './tree/tree.page';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { TablePage } from './table/table.page';
@@ -27,7 +29,7 @@ import { DescriptionListPage } from './description-list/description-list.page';
 import { SmallComponentsPage } from './small-components/small-components.page';
 import { ExpandablePanelPage } from './expandable-panel/expandable-panel.page';
 import { SampleModalComponent } from './small-components/sample-modal/sample-modal.component';
-import { TreePage } from './tree/tree.page';
+import { ChartPage } from './chart/chart.page';
 
 @NgModule({
   imports: [
@@ -51,6 +53,14 @@ import { TreePage } from './tree/tree.page';
         path: ComponentsRoutes.Card,
         component: CardPage,
       },
+      {
+        path: ComponentsRoutes.Ide,
+        component: IdePage,
+      },
+      {
+        path: ComponentsRoutes.Chart,
+        component: ChartPage,
+      },
       {
         path: ComponentsRoutes.Icon,
         component: IconPage,
@@ -138,6 +148,7 @@ import { TreePage } from './tree/tree.page';
     ]),
   ],
   declarations: [
+    IdePage,
     FabPage,
     MapPage,
     CardPage,
@@ -148,6 +159,7 @@ import { TreePage } from './tree/tree.page';
     ListPage,
     TabsPage,
     TreePage,
+    ChartPage,
     TablePage,
     SliderPage,
     StepperPage,

src/app/pages/components/ide/ide.page.html

@@ -0,0 +1,37 @@
+<v-page
+  [hasSide]="true"
+  [toolbarTitle]="toolbarTitle"
+  [toolbarSubTitle]="toolbarSubTitle"
+  [toolbarShowSubTitle]="toolbarShowSubTitle"
+>
+  <!-- Content -->
+  <x-card [isInPage]="true" [showActions]="true" [color]="ColorNames.Light">
+    <!-- Content -->
+    <x-markdown
+      [mode]="'preview'"
+      [hasToolbar]="false"
+      [content]="getContent('content')"
+    ></x-markdown>
+
+    <!-- Sample -->
+    <x-markdown
+      [mode]="'preview'"
+      [content]="sample1"
+      [hasToolbar]="false"
+      [cssClass]="'code-block'"
+    ></x-markdown>
+  </x-card>
+
+  <!-- IDE -->
+  <x-ide
+    [fontSize]="18"
+    [isInPage]="true"
+    [wrapWithCard]="true"
+    [content]="ideContent"
+    [cardTitle]="toolbarTitle"
+    [cardSubTitle]="toolbarSubTitle"
+    [actionBarColor]="ColorNames.Dark"
+    [defaultActionBarItemColor]="ColorNames.Light"
+  >
+  </x-ide>
+</v-page>

src/app/pages/components/ide/ide.page.ts

@@ -0,0 +1,153 @@
+import { Component } from '@angular/core';
+import { isNullOrEmptyString } from 'x-framework-core';
+import { VPageComponent } from '../../../views/v-page/v-page.component';
+import { AppResourceIDs } from 'src/app/config/app.localization.config';
+
+@Component({
+  selector: 'app-ide',
+  templateUrl: './ide.page.html',
+  styleUrls: ['./ide.page.scss'],
+})
+export class IdePage extends VPageComponent {
+  //
+  //#region Props ...
+  titleRes = AppResourceIDs.ide;
+  toolbarShowSubTitle = true;
+  toolbarTitle = this.resourceProvider(this.titleRes);
+  toolbarSubTitle = this.resourceProvider(AppResourceIDs.ide_description);
+
+  readonly contentFa = `
+  # ${this.toolbarTitle}
+
+  این مولفه جهت نمایش محتوای کدهای منبع و ویرایش آن ها بکار می رود..
+  `;
+  readonly contentEn = `
+  # ${this.toolbarTitle}
+
+  this Component used for show and edit Code sources.
+  `;
+
+  readonly sample1 =
+    '```html' +
+    `
+<x-ide
+  [mode]="props.mode"
+  [theme]="props.theme"
+  [content]="props.content"
+  [cssClass]="props.cssClass"
+  [minLines]="props.minLines"
+  [maxLines]="props.maxLines"
+  [fontSize]="props.fontSize"
+  [readonly]="props.readonly"
+  [isInPage]="props.isInPage"
+  [alignTabs]="props.alignTabs"
+  [cardColor]="props.cardColor"
+  [cardTitle]="props.cardTitle"
+  [cardSubTitle]="props.cardSubTitle"
+  [wordWrapping]="props.wordWrapping"
+  [wrapWithCard]="props.wrapWithCard"
+  [cardCssClass]="props.cardCssClass"
+  [showActionBar]="props.showActionBar"
+  [actionBarColor]="props.actionBarColor"
+  [cardShowFooter]="props.cardShowFooter"
+  [defaultTabName]="props.defaultTabName"
+  [actionProvider]="props.actionProvider"
+  [tabHeaderColor]="props.tabHeaderColor"
+  [activeTabColor]="props.activeTabColor"
+  [cardShowActions]="props.cardShowActions"
+  [showLineNumbers]="props.showLineNumbers"
+  [showPrintMargin]="props.showPrintMargin"
+  [showFoldWidgets]="props.showFoldWidgets"
+  [actionBarActions]="props.actionBarActions"
+  [actionBarCssClass]="props.actionBarCssClass"
+  (contentChange)="props.contentChange($event)"
+  [cardActionProvider]="props.cardActionProvider"
+  [highlightActiveLine]="props.highlightActiveLine"
+  [cardForegroundColor]="props.cardForegroundColor"
+  [basicAutocompletion]="props.basicAutocompletion"
+  [hasCloseOnDefaultTab]="props.hasCloseOnDefaultTab"
+  [availableActionBarItems]="props.availableActionBarItems"
+  [actionBarActionProvider]="props.actionBarActionProvider"
+  (actionBarActionFired)="props.actionBarActionFired($event)"
+  [actionBarForegroundColor]="props.actionBarForegroundColor"
+  [defaultActionBarItemColor]="props.defaultActionBarItemColor"
+>
+</x-ide>` +
+    '```';
+
+  ideContent = `
+import {
+  XBaseDataPagerQuery,
+  XBaseDataPagerQueryResult,
+} from 'x-framework-core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { XQueryDto, XQueryResultDto } from '../models/x-query.dto';
+
+export function toXQuery(
+  q: XBaseDataPagerQuery,
+  containsDetail = true,
+  enableTracking = false,
+  sortBy = 'id',
+  isAscending = true
+) {
+  return {
+    filter: q.filter,
+    containsDetail,
+    enableTracking,
+    sortBy,
+    isAscending,
+    page: q.pageNumber,
+    pageSize: q.rowsInPage,
+  } as XQueryDto;
+}
+
+export function applyToDataPagerQueryResult<T>(
+  result: Observable<XQueryResultDto<T>>
+) {
+  return result.pipe(
+    map((queryResult) => {
+      return {
+        count: queryResult.totalItems || 0,
+        items: queryResult.items || [],
+      } as XBaseDataPagerQueryResult<T>;
+    })
+  );
+}
+`;
+  //#endregion
+
+  //
+  //#region UI Providers ...
+  /**
+   * read specified variable content based on current locale ...
+   *
+   * @param title which var can read ...
+   *
+   * @returns string content ...
+   */
+  getContent(title: string) {
+    //
+    if (isNullOrEmptyString(title)) {
+      return '';
+    }
+
+    //
+    const currentLocale = this.managerService.currentLocale;
+
+    //
+    const varName =
+      title +
+      (currentLocale === 'en-US'
+        ? 'En'
+        : currentLocale === 'fa-IR'
+          ? 'Fa'
+          : '');
+
+    const result = (this as any)[`${varName}`];
+
+    //
+    return result || '';
+  }
+  //#endregion
+}

src/app/views/views.module.ts

@@ -9,6 +9,7 @@ import {
   XDirectivesModule as XFrameworkServicesDirectivesModule,
 } from 'x-framework-services';
 import {
+  XIDEModule,
   XFabModule,
   XMapModule,
   XTabsModule,
@@ -19,12 +20,14 @@ import {
   XGridModule,
   XFormModule,
   XTreeModule,
+  XChartModule,
   XTableModule,
   XThemeModule,
   XEmptyModule,
   XColorModule,
   XButtonModule,
   XSliderModule,
+  XDialogsModule,
   XSpinnerModule,
   XSlotterModule,
   XCounterModule,
@@ -47,7 +50,6 @@ import {
   XExpandablePanelModule,
   XDescriptionListModule,
   XFrameworkComponentsModule,
-  XDialogsModule,
 } from 'x-framework-components';
 import { NgModule } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
@@ -87,6 +89,7 @@ import { VMaintainerComponent } from './v-maintainer/v-maintainer.component';
     XFrameworkComponentsModule,
 
     //
+    XIDEModule,
     XFabModule,
     XMapModule,
     XPageModule,
@@ -99,6 +102,7 @@ import { VMaintainerComponent } from './v-maintainer/v-maintainer.component';
     XTreeModule,
     XColorModule,
     XTableModule,
+    XChartModule,
     XThemeModule,
     XButtonModule,
     XSliderModule,
@@ -142,6 +146,7 @@ import { VMaintainerComponent } from './v-maintainer/v-maintainer.component';
     XBaseComponentModule,
 
     //
+    XIDEModule,
     XFabModule,
     XMapModule,
     XPageModule,
@@ -151,7 +156,8 @@ import { VMaintainerComponent } from './v-maintainer/v-maintainer.component';
     XTabsModule,
     XListModule,
     XGridModule,
-    XTreeModule,    
+    XTreeModule,
+    XChartModule,
     XColorModule,
     XTableModule,
     XThemeModule,

tsconfig.json

@@ -19,6 +19,7 @@
     "skipDefaultLibCheck": true,
     "experimentalDecorators": true,
     "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
     "suppressImplicitAnyIndexErrors": true,
     "forceConsistentCasingInFileNames": true,
     "lib": [