add color properties has issues ...

projects/x-framework-components/src/lib/x-card/x-card.component.ts

@@ -6,8 +6,17 @@ import {
 import { Subject, Subscription } from 'rxjs';
 import { concatMap, map } from 'rxjs/operators';
 import { XSizeModel } from '../classes/x-size.model.';
-import { nameof, isNullOrEmptyString, isNullOrUndefined } from 'x-framework-core';
+import {
-import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
+  nameof,
+  isNullOrEmptyString,
+  isNullOrUndefined,
+} from 'x-framework-core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -78,14 +87,24 @@ export class XCardComponent extends XCardContainerComponent {
 
   //
   //#region Full Screen ...
+  //
   private IS_FULLSCREEN: boolean = false;
+
   set isFullscreen(v: boolean) {
     //
     const isChanged = v != this.IS_FULLSCREEN;
+    if (isChanged) {
+      //
+      this.actionProvider.next({
+        action: XCardAction.FullScreenToggled,
+        payload: v,
+      });
+    }
 
     //
     this.IS_FULLSCREEN = v;
   }
+
   get isFullscreen() {
     return this.IS_FULLSCREEN;
   }
@@ -100,9 +119,18 @@ export class XCardComponent extends XCardContainerComponent {
     //
     // Listen for fullscreen change events (handles ESC key and browser UI)
     document.addEventListener('fullscreenchange', this.fullscreenChangeHandler);
-    document.addEventListener('webkitfullscreenchange', this.fullscreenChangeHandler);
+    document.addEventListener(
-    document.addEventListener('mozfullscreenchange', this.fullscreenChangeHandler);
+      'webkitfullscreenchange',
-    document.addEventListener('MSFullscreenChange', this.fullscreenChangeHandler);
+      this.fullscreenChangeHandler,
+    );
+    document.addEventListener(
+      'mozfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.addEventListener(
+      'MSFullscreenChange',
+      this.fullscreenChangeHandler,
+    );
   }
 
   onChange(changeKeys: string[]) {
@@ -127,10 +155,22 @@ export class XCardComponent extends XCardContainerComponent {
     this.unregisterActionProvider();
 
     //
-    document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler);
+    document.removeEventListener(
-    document.removeEventListener('webkitfullscreenchange', this.fullscreenChangeHandler);
+      'fullscreenchange',
-    document.removeEventListener('mozfullscreenchange', this.fullscreenChangeHandler);
+      this.fullscreenChangeHandler,
-    document.removeEventListener('MSFullscreenChange', this.fullscreenChangeHandler);
+    );
+    document.removeEventListener(
+      'webkitfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'mozfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'MSFullscreenChange',
+      this.fullscreenChangeHandler,
+    );
   }
 
   registerViewHandlers() {
@@ -192,7 +232,7 @@ export class XCardComponent extends XCardContainerComponent {
       //
       this.isFullscreen = true;
       this.detectChanges();
-    } catch { }
+    } catch {}
   }
 
   public async exitFullscreen() {
@@ -211,7 +251,7 @@ export class XCardComponent extends XCardContainerComponent {
       //
       this.isFullscreen = false;
       this.detectChanges();
-    } catch { }
+    } catch {}
   }
 
   public async toggleFullscreen() {
@@ -231,14 +271,17 @@ export class XCardComponent extends XCardContainerComponent {
 
     //
     // Validate ...
-    if (isNullOrUndefined(this.CARD_IMAGE) || isNullOrUndefined(this.CARD_IMAGE.nativeElement)) {
+    if (
+      isNullOrUndefined(this.CARD_IMAGE) ||
+      isNullOrUndefined(this.CARD_IMAGE.nativeElement)
+    ) {
       return result;
     }
 
     //
     result = {
       width: this.CARD_IMAGE.nativeElement.offsetWidth,
-      height: this.CARD_IMAGE.nativeElement.offsetHeight
+      height: this.CARD_IMAGE.nativeElement.offsetHeight,
     };
 
     //
@@ -251,14 +294,17 @@ export class XCardComponent extends XCardContainerComponent {
 
     //
     // Validate ...
-    if (isNullOrUndefined(this.CARD_HEADER) || isNullOrUndefined(this.CARD_HEADER.nativeElement)) {
+    if (
+      isNullOrUndefined(this.CARD_HEADER) ||
+      isNullOrUndefined(this.CARD_HEADER.nativeElement)
+    ) {
       return result;
     }
 
     //
     result = {
       width: this.CARD_HEADER.nativeElement.offsetWidth,
-      height: this.CARD_HEADER.nativeElement.offsetHeight
+      height: this.CARD_HEADER.nativeElement.offsetHeight,
     };
 
     //
@@ -271,14 +317,17 @@ export class XCardComponent extends XCardContainerComponent {
 
     //
     // Validate ...
-    if (isNullOrUndefined(this.CARD_FOOTER) || isNullOrUndefined(this.CARD_FOOTER.nativeElement)) {
+    if (
+      isNullOrUndefined(this.CARD_FOOTER) ||
+      isNullOrUndefined(this.CARD_FOOTER.nativeElement)
+    ) {
       return result;
     }
 
     //
     result = {
       width: this.CARD_FOOTER.nativeElement.offsetWidth,
-      height: this.CARD_FOOTER.nativeElement.offsetHeight
+      height: this.CARD_FOOTER.nativeElement.offsetHeight,
     };
 
     //
@@ -291,14 +340,17 @@ export class XCardComponent extends XCardContainerComponent {
 
     //
     // Validate ...
-    if (isNullOrUndefined(this.CARD_CONTENT) || isNullOrUndefined(this.CARD_CONTENT.nativeElement)) {
+    if (
+      isNullOrUndefined(this.CARD_CONTENT) ||
+      isNullOrUndefined(this.CARD_CONTENT.nativeElement)
+    ) {
       return result;
     }
 
     //
     result = {
       width: this.CARD_CONTENT.nativeElement.offsetWidth,
-      height: this.CARD_CONTENT.nativeElement.offsetHeight
+      height: this.CARD_CONTENT.nativeElement.offsetHeight,
     };
 
     //
@@ -311,14 +363,17 @@ export class XCardComponent extends XCardContainerComponent {
 
     //
     // Validate ...
-    if (isNullOrUndefined(this.CARD_ACTIONS) || isNullOrUndefined(this.CARD_ACTIONS.nativeElement)) {
+    if (
+      isNullOrUndefined(this.CARD_ACTIONS) ||
+      isNullOrUndefined(this.CARD_ACTIONS.nativeElement)
+    ) {
       return result;
     }
 
     //
     result = {
       width: this.CARD_ACTIONS.nativeElement.offsetWidth,
-      height: this.CARD_ACTIONS.nativeElement.offsetHeight
+      height: this.CARD_ACTIONS.nativeElement.offsetHeight,
     };
 
     //

projects/x-framework-components/src/lib/x-card/x-card.typings.ts

@@ -33,16 +33,19 @@ import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
 import { XFrameworkComponentsConfig } from '../config/x-framework-components.config';
 
 export enum XCardAction {
+  //
   Refresh = 'refresh',
+  //
   ExitFullScreen = 'exit_full_screen',
   EnterFullScreen = 'enter_full_screen',
   ToggleFullScreen = 'toggle_full_screen',
+  //
+  FullScreenToggled = 'full_screen_toggled',
 }
 
 export type XCardActionIdentifier = XCardAction | string;
 
-export interface XCardActionModel
+export interface XCardActionModel extends XBaseActionModel<XCardActionIdentifier> {}
-  extends XBaseActionModel<XCardActionIdentifier> {}
 
 //
 //#region Container ...
@@ -190,7 +193,7 @@ export abstract class XCardContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardContainer
+    protected propertyProvider: XCardContainer,
   ) {
     super(
       config,
@@ -199,7 +202,7 @@ export abstract class XCardContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -207,37 +210,37 @@ export abstract class XCardContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXCardContainer
+    container?: IXCardContainer,
   ): Observable<IXCardContainer> {
     return forkJoin({
       //
       cssClass: this.getArrayValue(
-        container ? container.cssClass : this.cssClass
+        container ? container.cssClass : this.cssClass,
       ),
 
       //
       color: this.getValue(container ? container.color : this.color),
       foregroundColor: this.getValue(
-        container ? container.foregroundColor : this.foregroundColor
+        container ? container.foregroundColor : this.foregroundColor,
       ),
 
       //
       showHeader: this.getValue(
-        container ? container.showHeader : this.showHeader
+        container ? container.showHeader : this.showHeader,
       ),
       title: this.getValue(container ? container.title : this.title),
       subTitle: this.getValue(container ? container.subTitle : this.subTitle),
       avatarUrl: this.getValue(
-        container ? container.avatarUrl : this.avatarUrl
+        container ? container.avatarUrl : this.avatarUrl,
       ),
       avatarTemplate: this.getValue(
-        container ? container.avatarTemplate : this.avatarTemplate
+        container ? container.avatarTemplate : this.avatarTemplate,
       ),
 
       //
       imageUrl: this.getValue(container ? container.imageUrl : this.imageUrl),
       imageDescription: this.getValue(
-        container ? container.imageDescription : this.imageDescription
+        container ? container.imageDescription : this.imageDescription,
       ),
 
       //
@@ -245,13 +248,13 @@ export abstract class XCardContainerComponent
 
       //
       showContent: this.getValue(
-        container ? container.showContent : this.showContent
+        container ? container.showContent : this.showContent,
       ),
       showActions: this.getValue(
-        container ? container.showActions : this.showActions
+        container ? container.showActions : this.showActions,
       ),
       showFooter: this.getValue(
-        container ? container.showFooter : this.showFooter
+        container ? container.showFooter : this.showFooter,
       ),
     }).pipe(
       map((data) => {
@@ -264,7 +267,7 @@ export abstract class XCardContainerComponent
             ? container.actionProvider
             : this.actionProvider,
         };
-      })
+      }),
     );
   }
   //#endregion
@@ -288,8 +291,7 @@ type TXComponentCardContainer = {
 };
 
 export interface IXComponentCardContainer
-  extends TXComponentCardContainer,
+  extends TXComponentCardContainer, IXBaseComponentContainer {
-    IXBaseComponentContainer {
   isInPage: XStandardType<boolean>;
   wrapWithCard: XStandardType<boolean>;
 }
@@ -403,7 +405,7 @@ export abstract class XComponentCardContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentCardContainer
+    protected propertyProvider: XComponentCardContainer,
   ) {
     super(
       config,
@@ -412,7 +414,7 @@ export abstract class XComponentCardContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -420,34 +422,34 @@ export abstract class XComponentCardContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXComponentCardContainer
+    container?: IXComponentCardContainer,
   ): Observable<IXComponentCardContainer> {
     return forkJoin({
       //
       isInPage: this.getValue(container ? container.isInPage : this.isInPage),
       wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard
+        container ? container.wrapWithCard : this.wrapWithCard,
       ),
       cardCssClass: this.getValue(
-        container ? container.cardCssClass : this.cardCssClass
+        container ? container.cardCssClass : this.cardCssClass,
       ),
       cardColor: this.getValue(
-        container ? container.cardColor : this.cardColor
+        container ? container.cardColor : this.cardColor,
       ),
       cardForegroundColor: this.getValue(
-        container ? container.cardForegroundColor : this.cardForegroundColor
+        container ? container.cardForegroundColor : this.cardForegroundColor,
       ),
       cardTitle: this.getValue(
-        container ? container.cardTitle : this.cardTitle
+        container ? container.cardTitle : this.cardTitle,
       ),
       cardSubTitle: this.getValue(
-        container ? container.cardSubTitle : this.cardSubTitle
+        container ? container.cardSubTitle : this.cardSubTitle,
       ),
       cardShowFooter: this.getValue(
-        container ? container.cardShowFooter : this.cardShowFooter
+        container ? container.cardShowFooter : this.cardShowFooter,
       ),
       cardShowActions: this.getValue(
-        container ? container.cardShowActions : this.cardShowActions
+        container ? container.cardShowActions : this.cardShowActions,
       ),
     }).pipe(
       map((data) => {
@@ -460,7 +462,7 @@ export abstract class XComponentCardContainerComponent
             ? container.cardActionProvider
             : this.cardActionProvider,
         };
-      })
+      }),
     );
   }
   //#endregion

projects/x-framework-components/src/lib/x-chart/x-chart.component.html

@@ -4,6 +4,7 @@
     #chartCard
     class="x-card"
     [showActions]="true"
+    [actionProvider]="cardActionProvider"
     [color]="getValue(cardColor) | async"
     [ngClass]="getValue(cssClass) | async"
     [isInPage]="getValue(isInPage) | async"
@@ -42,6 +43,7 @@
   >
     <!-- Toolbar -->
     <x-action-bar
+      #chartActionBar
       [color]="actionBarColor"
       [cssClass]="actionBarCssClass"
       [actionProvider]="actionBarActionProvider"

projects/x-framework-components/src/lib/x-chart/x-chart.component.ts

@@ -2,7 +2,6 @@ import {
   Component,
   ViewChild,
   ElementRef,
-  HostListener,
   ChangeDetectionStrategy,
 } from '@angular/core';
 import {
@@ -29,9 +28,10 @@ import {
   XChartDrilldownEvent,
   XChartContainerComponent,
   XChartStoryboardBeatInfo,
+  XChartColorFormatterOpts,
 } from './x-chart.typings';
-import { fromEvent, Subject, Subscription } from 'rxjs';
 import ApexCharts from 'apexcharts';
+import { Subject, Subscription } from 'rxjs';
 import {
   XActionBarItem,
   XActionBarItemSlot,
@@ -39,8 +39,8 @@ import {
 } from '../x-action-bar/x-action-bar.typings';
 import { XIconNames } from '../x-icon/x-icon.typings';
 import { XCardAction } from '../x-card/x-card.typings';
-import { debounceTime, takeUntil } from 'rxjs/operators';
 import { XCardComponent } from '../x-card/x-card.component';
+import { XActionBarComponent } from '../x-action-bar/x-action-bar.component';
 
 @Component({
   selector: 'x-chart',
@@ -52,40 +52,69 @@ export class XChartComponent extends XChartContainerComponent {
   //
   //#region Props ...
   //
+  //#region Chart Container ...
+  //
   private CHART_CONTAINER: ElementRef = undefined;
 
   @ViewChild('chartContainer', { static: false })
-  set chartContainer(el: ElementRef) {
+  set chartContainer(v: ElementRef) {
     //
-    if (isNullOrUndefined(el)) {
+    if (isNullOrUndefined(v)) {
       //
       this.destroyComponent();
       return;
     }
 
     //
-    this.CHART_CONTAINER = el;
+    this.CHART_CONTAINER = v;
     this.initializeComponent();
   }
 
   get chartContainer() {
     return this.CHART_CONTAINER;
   }
+  //#endregion
 
   //
-  private CHART_CARD: ElementRef<XCardComponent> = undefined;
+  //#region Chart ActionBar ...
+  //
+  private CHART_ACTIONBAR: XActionBarComponent = undefined;
+
+  @ViewChild('chartActionBar', { static: false })
+  set chartActionBar(v: XActionBarComponent) {
+    this.CHART_ACTIONBAR = v;
+  }
+
+  get chartActionBar() {
+    return this.CHART_ACTIONBAR;
+  }
+  //#endregion
+
+  //
+  //#region Chart Card ...
+  //
+  private CHART_CARD: XCardComponent = undefined;
 
   @ViewChild('chartCard', { static: false })
-  set chartCard(el: ElementRef<XCardComponent>) {
+  set chartCard(v: XCardComponent) {
-    this.CHART_CARD = el;
+    //
+    if (!isNullOrUndefined(v)) {
+      this.registerCardActionProvider();
+    } else {
+      this.unregisterCardActionProvider();
+    }
+
+    //
+    this.CHART_CARD = v;
   }
 
   get chartCard() {
-    return this.CHART_CARD;;
+    return this.CHART_CARD;
   }
+  //#endregion
 
   //
-  private RESIZE_SUBJECT = new Subject<Event>();
+  private ORIGINAL_HEIGHT: string = undefined;
 
   //
   private CHART_OPTIONS: XChartOptions = null;
@@ -95,6 +124,7 @@ export class XChartComponent extends XChartContainerComponent {
 
   //
   private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
+  private CARD_ACTION_PROVIDER_SUBSCRIPTION: Subscription;
 
   //
   readonly IconNames = Object.assign({}, XIconNames);
@@ -109,7 +139,6 @@ export class XChartComponent extends XChartContainerComponent {
 
     //
     await this.initializeComponent();
-    this.registerResizeHandler();
   }
 
   async onChange(changeKeys: string[]) {
@@ -342,13 +371,10 @@ export class XChartComponent extends XChartContainerComponent {
   onDestroy() {
     super.onDestroy();
 
-    //
-    this.RESIZE_SUBJECT.next();
-    this.RESIZE_SUBJECT.complete();
-
     //
     this.destroyComponent();
     this.unregisterActionProvider();
+    this.unregisterCardActionProvider();
   }
   //#endregion
 
@@ -667,7 +693,7 @@ export class XChartComponent extends XChartContainerComponent {
           printWindow.document.close();
         }
       }
-    } catch (error) { }
+    } catch (error) {}
   }
 
   async handleToggleFullscreen() {
@@ -699,8 +725,14 @@ export class XChartComponent extends XChartContainerComponent {
     const type = await this.getValueAsync(this.type);
     const chartId = await this.getValueAsync(this.uuid);
     const series = await this.getValueAsync(this.series);
+
+    //
     const cOptions = await this.getValueAsync(this.options);
 
+    //
+    const colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> =
+      [getXColorValue(XColorWithBrightness.PrimaryShade)];
+
     //
     const title = await this.getResourceValueAsync(this.title);
     const titleAlignProp = await this.getValueAsync(this.titleAlign);
@@ -734,6 +766,9 @@ export class XChartComponent extends XChartContainerComponent {
     //
     const primaryColorValue = getXColorValue(XColorWithBrightness.Primary);
 
+    //
+    console.log('cOptions: ', cOptions);
+
     //
     // Normalize Directional Properties ....
     if (this.managerService.uiDirection == 'ltr') {
@@ -773,27 +808,27 @@ export class XChartComponent extends XChartContainerComponent {
     //
     this.CHART_OPTIONS = {
       ...cOptions,
-      series: series || cOptions.series,
+      series: series,
       title: {
-        ...cOptions.title,
+        ...cOptions?.title,
         text: title,
         align: titleAlign,
         style: {
-          ...cOptions.title?.style,
+          ...cOptions?.title?.style,
           color: titleColorValue,
         },
       },
       subtitle: {
-        ...cOptions.subtitle,
+        ...cOptions?.subtitle,
         text: subTitle,
         align: subTitleAlign,
         style: {
-          ...cOptions.subtitle?.style,
+          ...cOptions?.subtitle?.style,
           color: subTitleColorValue,
         },
       },
       chart: {
-        ...cOptions.chart,
+        ...cOptions?.chart,
         id: chartId,
         type: type as any,
         foreColor: foregroundColorValue,
@@ -803,7 +838,7 @@ export class XChartComponent extends XChartContainerComponent {
           autoSelected: 'pan',
         },
         events: {
-          ...cOptions.chart?.events,
+          ...cOptions?.chart?.events,
           //
           //#region Attach Events ...
           //
@@ -814,7 +849,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.animationEnd?.(chart, options);
+            cOptions?.chart?.events?.animationEnd?.(chart, options);
           },
 
           //
@@ -825,7 +860,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeMount?.(chart, options);
+            cOptions?.chart?.events?.beforeMount?.(chart, options);
           },
 
           //
@@ -836,7 +871,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mounted?.(chart, options);
+            cOptions?.chart?.events?.mounted?.(chart, options);
           },
 
           //
@@ -847,7 +882,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.updated?.(chart, options);
+            cOptions?.chart?.events?.updated?.(chart, options);
           },
 
           //
@@ -862,7 +897,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mouseMove?.(e, chart, options);
+            cOptions?.chart?.events?.mouseMove?.(e, chart, options);
           },
 
           //
@@ -877,7 +912,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.mouseLeave?.(e, chart, options);
           },
 
           //
@@ -892,7 +927,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.click?.(e, chart, options);
+            cOptions?.chart?.events?.click?.(e, chart, options);
           },
 
           //
@@ -907,7 +942,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.xAxisLabelClick?.(e, chart, options);
+            cOptions?.chart?.events?.xAxisLabelClick?.(e, chart, options);
           },
 
           //
@@ -925,7 +960,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.legendClick?.(chart, seriesIndex, options);
+            cOptions?.chart?.events?.legendClick?.(chart, seriesIndex, options);
           },
 
           //
@@ -940,7 +975,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.markerClick?.(e, chart, options);
+            cOptions?.chart?.events?.markerClick?.(e, chart, options);
           },
 
           //
@@ -957,7 +992,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.selection?.(chart, options);
+            cOptions?.chart?.events?.selection?.(chart, options);
           },
 
           //
@@ -972,7 +1007,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointSelection?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointSelection?.(e, chart, options);
           },
 
           //
@@ -987,7 +1022,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointMouseEnter?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseEnter?.(e, chart, options);
           },
 
           //
@@ -1002,7 +1037,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointMouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseLeave?.(e, chart, options);
           },
 
           //
@@ -1016,7 +1051,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeZoom?.(chart, options);
           },
 
           //
@@ -1027,7 +1062,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeResetZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeResetZoom?.(chart, options);
           },
 
           //
@@ -1044,7 +1079,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.zoomed?.(chart, options);
+            cOptions?.chart?.events?.zoomed?.(chart, options);
           },
 
           //
@@ -1058,7 +1093,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.scrolled?.(chart, options);
+            cOptions?.chart?.events?.scrolled?.(chart, options);
           },
 
           //
@@ -1075,7 +1110,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.brushScrolled?.(chart, options);
+            cOptions?.chart?.events?.brushScrolled?.(chart, options);
           },
 
           //
@@ -1092,7 +1127,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.crossFilter?.(chart, options);
+            cOptions?.chart?.events?.crossFilter?.(chart, options);
           },
 
           //
@@ -1112,7 +1147,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.filterChange?.(chart, options);
+            cOptions?.chart?.events?.filterChange?.(chart, options);
           },
 
           //
@@ -1134,7 +1169,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationDragged?.(chart, options);
+            cOptions?.chart?.events?.annotationDragged?.(chart, options);
           },
 
           //
@@ -1153,7 +1188,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationEdited?.(chart, options);
+            cOptions?.chart?.events?.annotationEdited?.(chart, options);
           },
 
           //
@@ -1173,7 +1208,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationCreated?.(chart, options);
+            cOptions?.chart?.events?.annotationCreated?.(chart, options);
           },
 
           //
@@ -1193,7 +1228,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationStyled?.(chart, options);
+            cOptions?.chart?.events?.annotationStyled?.(chart, options);
           },
 
           //
@@ -1211,7 +1246,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationDeleted?.(chart, options);
+            cOptions?.chart?.events?.annotationDeleted?.(chart, options);
           },
 
           //
@@ -1232,7 +1267,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.measured?.(chart, options);
+            cOptions?.chart?.events?.measured?.(chart, options);
           },
 
           //
@@ -1246,7 +1281,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beatChange?.(chart, options);
+            cOptions?.chart?.events?.beatChange?.(chart, options);
           },
 
           //
@@ -1261,7 +1296,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.keyDown?.(e, chart, options);
+            cOptions?.chart?.events?.keyDown?.(e, chart, options);
           },
 
           //
@@ -1276,7 +1311,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.keyUp?.(e, chart, options);
+            cOptions?.chart?.events?.keyUp?.(e, chart, options);
           },
 
           //
@@ -1291,7 +1326,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownStart?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownStart?.(info, chart, options);
           },
 
           //
@@ -1306,7 +1341,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownEnd?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownEnd?.(info, chart, options);
           },
 
           //
@@ -1321,7 +1356,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillUp?.(info, chart, options);
+            cOptions?.chart?.events?.drillUp?.(info, chart, options);
           },
 
           //
@@ -1336,22 +1371,22 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownError?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownError?.(info, chart, options);
           },
           //#endregion
         },
       },
       theme: {
-        ...cOptions.theme,
+        ...cOptions?.theme,
-        palette: cOptions.theme?.palette || 'palette1',
+        palette: cOptions?.theme?.palette || 'palette1',
       },
-      colors: cOptions.colors || [primaryColorValue],
+      colors: colors,
       grid: {
-        ...cOptions.grid,
+        ...cOptions?.grid,
         borderColor: gridColorValue,
       },
       dataLabels: {
-        ...cOptions.dataLabels,
+        ...cOptions?.dataLabels,
       },
     };
 
@@ -1361,9 +1396,18 @@ export class XChartComponent extends XChartContainerComponent {
       this.CHART_OPTIONS,
     );
 
+    //
+    // Storing Original Height ...
+    if (isNullOrEmptyString(this.ORIGINAL_HEIGHT)) {
+      this.ORIGINAL_HEIGHT = this.CHART_OPTIONS.chart?.height?.toString();
+    }
+
     //
     await this.prepareActionBar();
 
+    //
+    console.log('CHART_OPTIONS: ', this.CHART_OPTIONS);
+
     //
     await this.chartInstance.render();
   }
@@ -2045,40 +2089,58 @@ export class XChartComponent extends XChartContainerComponent {
     this.chartInstance = null;
   }
 
-  private registerResizeHandler() {
+  private async handleFullscreenMode(isFullscreen: boolean) {
     //
-    fromEvent(window, 'resize')
+    if (
-      .pipe(
+      isNullOrUndefined(this.chartCard) ||
-        debounceTime(200),
+      isNullOrUndefined(this.chartInstance)
-        takeUntil(this.RESIZE_SUBJECT)
+    ) {
-      )
+      return;
-      .subscribe(() => {
+    }
-        //
-        if (isNullOrUndefined(this.chartInstance) || isNullOrUndefined(this.chartCard) || isNullOrUndefined(this.chartCard.nativeElement) || !this.chartCard.nativeElement.isFullscreen) {
-          return;
-        }
 
-        //
+    //
-        var height = this.chartCard.nativeElement.calculateContentSize();
+    let height = this.ORIGINAL_HEIGHT;
+    if (isFullscreen) {
+      //
+      const cardImageElement = document.querySelector('.x-card .x-image');
+      const cardHeaderElement = document.querySelector('.x-card .x-header');
+      const cardFooterElement = document.querySelector('.x-card .x-footer');
+      const cardContentElement = document.querySelector('.x-card .x-content');
+      const cardActionsElement = document.querySelector('.x-card .x-actions');
+      const actionBarHeight =
+        (this.chartActionBar?.element?.nativeElement as HTMLElement)
+          ?.offsetHeight || 0;
 
-        //
+      //
-        // Reading Height ...
+      const offset = 24;
-        this.CHART_OPTIONS = {
+      height = `${
-          ...this.CHART_OPTIONS,
+        window.innerHeight -
-          chart: {
+        offset -
-            height: `${height}px`
+        (actionBarHeight +
-          }
+          (cardImageElement?.clientHeight || 0) +
-        };
+          (cardHeaderElement?.clientHeight || 0) +
+          (cardActionsElement?.clientHeight || 0) +
+          (cardFooterElement?.clientHeight || 0))
+      }px`;
+    }
 
-        //
+    //
-        // TODO: 
+    this.CHART_OPTIONS = {
-        // Only Apply when Full Screen Mode ...
+      ...this.CHART_OPTIONS,
-        // Add FullScreen Event Handler in XCard Component ...
+      chart: {
-        console.log('chart resize: ', height);
+        height: height,
+      },
+    };
 
-        //
+    //
-        this.chartInstance.updateOptions(this.CHART_OPTIONS, false, false);
+    this.chartInstance.updateOptions(
-      });
+      this.CHART_OPTIONS,
+      false,
+      true,
+      false,
+      false,
+    );
+    this.managerService.dispatchResizeEvent();
   }
 
   private registerActionProvider() {
@@ -2151,5 +2213,43 @@ export class XChartComponent extends XChartContainerComponent {
     this.ACTION_PROVIDER_SUBSCRIPTION.unsubscribe();
     this.ACTION_PROVIDER_SUBSCRIPTION = null;
   }
+
+  private registerCardActionProvider() {
+    //
+    if (!isNullOrUndefined(this.CARD_ACTION_PROVIDER_SUBSCRIPTION)) {
+      this.unregisterCardActionProvider();
+    }
+
+    //
+    this.CARD_ACTION_PROVIDER_SUBSCRIPTION = this.cardActionProvider
+      .asObservable()
+      .subscribe(async (model) => {
+        //
+        if (isNullOrUndefined(model) || isNullOrEmptyString(model.action)) {
+          return;
+        }
+
+        //
+        // Handle Full Screen Toggled ...
+        if (model.action == XCardAction.FullScreenToggled) {
+          //
+          const isFullscreen = isNullOrUndefined(model.payload)
+            ? false
+            : (model.payload as boolean) || false;
+          await this.handleFullscreenMode(isFullscreen);
+        }
+      });
+  }
+
+  private unregisterCardActionProvider() {
+    //
+    if (isNullOrUndefined(this.CARD_ACTION_PROVIDER_SUBSCRIPTION)) {
+      return;
+    }
+
+    //
+    this.CARD_ACTION_PROVIDER_SUBSCRIPTION.unsubscribe();
+    this.CARD_ACTION_PROVIDER_SUBSCRIPTION = null;
+  }
   //#endregion
 }

projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts

@@ -17,6 +17,7 @@ import {
   XColorIdentifier,
   XResourceIdentifier,
   XColorWithBrightness,
+  getXColorValue,
 } from 'x-framework-core';
 import {
   XCardActionModel,
@@ -3323,6 +3324,9 @@ export interface IXChartContainer extends TXChartContainer {
   series: XStandardType<XChartSeriesType>;
   type: XStandardType<XChartTypeIdentifier>;
 
+  //
+  colors: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+
   //
   title: XStandardType<XResourceIdentifier>;
   titleAlign: XStandardType<XChartTextAlignIdentifier>;
@@ -3473,6 +3477,11 @@ export class XChartContainer
   readonly series: XStandardType<XChartSeriesType>;
   readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
 
+  //
+  readonly colors: Array<
+    string | ((opts: XChartColorFormatterOpts) => string)
+  > = [getXColorValue(XColorWithBrightness.PrimaryShade)];
+
   //
   readonly title: XStandardType<XResourceIdentifier>;
   readonly titleAlign: XStandardType<XChartTextAlignIdentifier> =
@@ -3698,6 +3707,9 @@ export abstract class XChartContainerComponent
   @Input()
   zoomStep: XStandardType<number> = this.propertyProvider.zoomStep;
 
+  @Input()
+  colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> = this.propertyProvider.colors;
+
   @Input()
   defaultActionBarItemColor: XStandardType<XColorIdentifier> =
     this.propertyProvider.defaultActionBarItemColor;
@@ -4030,10 +4042,13 @@ export abstract class XChartContainerComponent
 
       //
       type: this.getValue(container ? container.type : this.type),
-      options: this.getValue(container ? container.options : this.options),
       series: this.getValue(container ? container.series : this.series),
+      options: this.getValue(container ? container.options : this.options),
       zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep),
 
+      //
+      colors: this.getValue(container ? container.colors : this.colors),
+
       //
       title: this.getValue(container ? container.title : this.title),
       titleAlign: this.getValue(