add color properties has issues ...

apply fix on chart component fullscreen issues and it's now works well ...
last works on xChart component ...
2026-08-31 22:24:40 +03:30 · 2026-08-31 00:52:12 +03:30 · 2026-08-30 23:59:21 +03:30 · 2026-08-29 17:22:55 +03:30 · 2026-08-29 09:12:39 +03:30 · 2026-08-29 01:14:08 +03:30
18 changed files with 2501 additions and 346 deletions
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M230-360h120v-60H250v-120h100v-60H230q-17 0-28.5 11.5T190-560v160q0 17 11.5 28.5T230-360Zm156 0h120q17 0 28.5-11.5T546-400v-60q0-17-11.5-31.5T506-506h-60v-34h100v-60H426q-17 0-28.5 11.5T386-560v60q0 17 11.5 30.5T426-456h60v36H386v60Zm264 0h60l70-240h-60l-40 138-40-138h-60l70 240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="M230-360h120v-60H250v-120h100v-60H230q-17 0-28.5 11.5T190-560v160q0 17 11.5 28.5T230-360Zm156 0h120q17 0 28.5-11.5T546-400v-60q0-17-11.5-31.5T506-506h-60v-34h100v-60H426q-17 0-28.5 11.5T386-560v60q0 17 11.5 30.5T426-456h60v36H386v60Zm264 0h60l70-240h-60l-40 138-40-138h-60l70 240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Z" />
+</svg>
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M260-500v-40h40v40h-40Zm400 140h40q25 0 42.5-17.5T760-420v-60h-60v60h-40v-120h100q0-25-17.5-42.5T700-600h-40q-25 0-42.5 17.5T600-540v120q0 25 17.5 42.5T660-360Zm-460 0h60v-80h60q17 0 28.5-11.5T360-480v-80q0-17-11.5-28.5T320-600H200v240Zm200 0h60v-96l40 96h60v-240h-60v94l-40-94h-60v240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Zm0 0v-480 480Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="M260-500v-40h40v40h-40Zm400 140h40q25 0 42.5-17.5T760-420v-60h-60v60h-40v-120h100q0-25-17.5-42.5T700-600h-40q-25 0-42.5 17.5T600-540v120q0 25 17.5 42.5T660-360Zm-460 0h60v-80h60q17 0 28.5-11.5T360-480v-80q0-17-11.5-28.5T320-600H200v240Zm200 0h60v-96l40 96h60v-240h-60v94l-40-94h-60v240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80v-480 480Z" />
+</svg>
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-120v-720h80v720h-80Zm640 0v-720h80v720h-80ZM280-440v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="M120-120v-720h80v720h-80Zm640 0v-720h80v720h-80ZM280-440v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80Z" />
+</svg>
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m320-160-56-57 103-103H80v-80h287L264-503l56-57 200 200-200 200Zm320-240L440-600l200-200 56 57-103 103h287v80H593l103 103-56 57Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="m320-160-56-57 103-103H80v-80h287L264-503l56-57 200 200-200 200Zm320-240L440-600l200-200 56 57-103 103h287v80H593l103 103-56 57Z" />
+</svg>
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m136-80-56-56 264-264H160v-80h320v320h-80v-184L136-80Zm344-400v-320h80v184l264-264 56 56-264 264h184v80H480Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="m136-80-56-56 264-264H160v-80h320v320h-80v-184L136-80Zm344-400v-320h80v184l264-264 56 56-264 264h184v80H480Z" />
+</svg>
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-561h80v287l62-62 58 56-160 160-160-160 58-56 62 62v-287Zm320 160h-80v-287l-64 64-56-56 160-160 160 160-56 56-64-64v287Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="M320-561h80v287l62-62 58 56-160 160-160-160 58-56 62 62v-287Zm320 160h-80v-287l-64 64-56-56 160-160 160 160-56 56-64-64v287Z" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z" />
+</svg>
@@ -0,0 +1,4 @@
+export interface XSizeModel {
+    width?: number;
+    height?: number;
+}
@@ -6,9 +6,10 @@
  [class.no-text]="isNoTextCard() | async"
  [class.page-card]="getValue(isInPage) | async"
  [isForeground]="getValue(foregroundColor) | async"
+  [class.fullscreen]="getValue(isFullscreen) | async"
 >
  <!-- Card Header -->
-  <mat-card-header class="x-header" *ngIf="getValue(showHeader) | async">
+  <mat-card-header #cardHeader class="x-header" *ngIf="getValue(showHeader) | async">
    <!-- Avatar Image -->
    <section
      *ngIf="notEmptyValue(avatarUrl) | async"
@@ -56,6 +57,7 @@
  <!-- Card Image -->
  <img
    mat-card-image
+    #cardImage
    class="x-image"
    [src]="getValue(imageUrl) | async"
    *ngIf="notEmptyValue(imageUrl) | async"
@@ -63,18 +65,18 @@
  />

  <!-- Card Content -->
-  <mat-card-content class="x-content" *ngIf="getValue(showContent) | async">
+  <mat-card-content #cardContent class="x-content" *ngIf="getValue(showContent) | async">
    <ng-content></ng-content>
  </mat-card-content>

  <!-- Card Actions -->
-  <mat-card-actions class="x-actions" *ngIf="getValue(showActions) | async">
+  <mat-card-actions #cardActions class="x-actions" *ngIf="getValue(showActions) | async">
    <ng-content select="[actions]"></ng-content>
  </mat-card-actions>

  <!-- Card Footer -->
  <mat-card-footer
-    #footer
+    #cardFooter
    class="x-footer"
    *ngIf="getValue(showFooter) | async"
  >
@@ -1,5 +1,42 @@
 //
-@import '../theme/theme.scss';
+@import "../theme/theme.scss";
+
+:host {
+  display: block;
+  width: inherit;
+  height: inherit;
+}
+
+.x-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s ease-in-out;
+  border-radius: var(--card-border-radius, 8px);
+  overflow: hidden;
+
+  &:fullscreen {
+    border-radius: 0;
+    width: 100vw;
+    height: 100vh;
+
+    .x-header {
+      padding: 16px 24px;
+    }
+
+    .x-content {
+      flex: 1;
+      overflow: auto;
+    }
+
+    .x-image {
+      max-height: 60vh;
+      object-fit: contain;
+    }
+  }
+}

 //
 :host::ng-deep.x-card.no-text {
@@ -16,11 +53,11 @@
  height: var(--height, inherit);
 }

-.x-card.page-card {
+.x-card.page-card:not(.fullscreen) {
  @include push-auto();
  @include applyWidthHeight();
  @include m-tb($d-l);
-  @include animation('fadeInUp');
+  @include animation("fadeInUp");

  &.mobile {
    box-sizing: border-box;
@@ -5,8 +5,18 @@ import {
 } from './x-card.typings';
 import { Subject, Subscription } from 'rxjs';
 import { concatMap, map } from 'rxjs/operators';
-import { nameof, isNullOrEmptyString } from 'x-framework-core';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { XSizeModel } from '../classes/x-size.model.';
+import {
+  nameof,
+  isNullOrEmptyString,
+  isNullOrUndefined,
+} from 'x-framework-core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';

@Component({
  // tslint:disable-next-line:component-selector
@@ -20,10 +30,109 @@ export class XCardComponent extends XCardContainerComponent {
  //#region Props ...
  //
  private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
+
+  //
+  //#region Card Elements ....
+  private CARD_IMAGE: ElementRef<HTMLElement> = undefined;
+  private CARD_HEADER: ElementRef<HTMLElement> = undefined;
+  private CARD_FOOTER: ElementRef<HTMLElement> = undefined;
+  private CARD_CONTENT: ElementRef<HTMLElement> = undefined;
+  private CARD_ACTIONS: ElementRef<HTMLElement> = undefined;
+
+  @ViewChild('cardImage', { static: false })
+  set cardImage(v: ElementRef<HTMLElement>) {
+    this.CARD_IMAGE = v;
+  }
+
+  @ViewChild('cardHeader', { static: false })
+  set cardHeader(v: ElementRef<HTMLElement>) {
+    this.CARD_HEADER = v;
+  }
+
+  @ViewChild('cardFooter', { static: false })
+  set cardFooter(v: ElementRef<HTMLElement>) {
+    this.CARD_FOOTER = v;
+  }
+
+  @ViewChild('cardContent', { static: false })
+  set cardContent(v: ElementRef<HTMLElement>) {
+    this.CARD_CONTENT = v;
+  }
+
+  @ViewChild('cardActions', { static: false })
+  set cardActions(v: ElementRef<HTMLElement>) {
+    this.CARD_ACTIONS = v;
+  }
+
+  get cardImage() {
+    return this.CARD_IMAGE;
+  }
+
+  get cardHeader() {
+    return this.CARD_HEADER;
+  }
+
+  get cardFooter() {
+    return this.CARD_FOOTER;
+  }
+
+  get cardContent() {
+    return this.CARD_CONTENT;
+  }
+
+  get cardActions() {
+    return this.CARD_ACTIONS;
+  }
+  //#endregion
+
+  //
+  //#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;
+  }
+  //#endregion
  //#endregion

  //
  //#region LifeCycles ...
+  onInit() {
+    super.onInit();
+
+    //
+    // Listen for fullscreen change events (handles ESC key and browser UI)
+    document.addEventListener('fullscreenchange', this.fullscreenChangeHandler);
+    document.addEventListener(
+      'webkitfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.addEventListener(
+      'mozfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.addEventListener(
+      'MSFullscreenChange',
+      this.fullscreenChangeHandler,
+    );
+  }
+
  onChange(changeKeys: string[]) {
    super.onChange(changeKeys);

@@ -31,7 +140,7 @@ export class XCardComponent extends XCardContainerComponent {
    //#region Action Provider Changed ...
    //
    const isActionProviderChanged = changeKeys.includes(
-      nameof<XCardComponent>('actionProvider')
+      nameof<XCardComponent>('actionProvider'),
    );
    if (isActionProviderChanged) {
      this.registerActionProvider();
@@ -44,6 +153,24 @@ export class XCardComponent extends XCardContainerComponent {

    //
    this.unregisterActionProvider();
+
+    //
+    document.removeEventListener(
+      'fullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'webkitfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'mozfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'MSFullscreenChange',
+      this.fullscreenChangeHandler,
+    );
  }

  registerViewHandlers() {
@@ -71,13 +198,190 @@ export class XCardComponent extends XCardContainerComponent {
              isNullOrEmptyString(object.title) &&
              isNullOrEmptyString(object.subTitle)
            );
-          })
-        )
-      )
+          }),
+        ),
+      ),
    );
  }
  //#endregion

+  //
+  //#region Actions ...
+  public async enterFullscreen(options?: FullscreenOptions) {
+    //
+    if (this.isFullscreen) {
+      return;
+    }
+
+    //
+    const element: HTMLElement = this.element?.nativeElement;
+    if (!element) {
+      return;
+    }
+
+    //
+    try {
+      //
+      if (!this.canUseFullscreen()) {
+        return;
+      }
+
+      //
+      await element.requestFullscreen(options);
+
+      //
+      this.isFullscreen = true;
+      this.detectChanges();
+    } catch {}
+  }
+
+  public async exitFullscreen() {
+    //
+    if (!this.isFullscreen) {
+      return;
+    }
+
+    //
+    try {
+      //
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      }
+
+      //
+      this.isFullscreen = false;
+      this.detectChanges();
+    } catch {}
+  }
+
+  public async toggleFullscreen() {
+    //
+    if (this.isFullscreen) {
+      await this.exitFullscreen();
+    } else {
+      await this.enterFullscreen();
+    }
+  }
+
+  //
+  //#region Size Calculating ...
+  public calculateImageSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    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,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateHeaderSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    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,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateFooterSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    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,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateContentSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    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,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateActionsSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    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,
+    };
+
+    //
+    return result;
+  }
+  //#endregion
+  //#endregion
+
  //
  //#region Private ...
  //
@@ -94,7 +398,7 @@ export class XCardComponent extends XCardContainerComponent {
    //
    // Handle Action Provider ...
    this.ACTION_PROVIDER_SUBSCRIPTION = this.applyTakeUntilWrapper(
-      this.actionProvider.asObservable()
+      this.actionProvider.asObservable(),
    ).subscribe(async (model) => {
      //
      if (!model) {
@@ -107,6 +411,21 @@ export class XCardComponent extends XCardContainerComponent {
        case XCardAction.Refresh:
          this.detectChanges();
          break;
+
+        //
+        case XCardAction.EnterFullScreen:
+          await this.enterFullscreen();
+          break;
+
+        //
+        case XCardAction.ExitFullScreen:
+          await this.exitFullscreen();
+          break;
+
+        //
+        case XCardAction.ToggleFullScreen:
+          await this.toggleFullscreen();
+          break;
      }
    });
  }
@@ -122,5 +441,31 @@ export class XCardComponent extends XCardContainerComponent {
    this.ACTION_PROVIDER_SUBSCRIPTION = null;
  }
  //#endregion
+
+  //
+  //#region Fullscreen ...
+  private fullscreenChangeHandler = () => {
+    //
+    const isFullscreen = !!(
+      document.fullscreenElement ||
+      (document as any).webkitFullscreenElement ||
+      (document as any).mozFullScreenElement ||
+      (document as any).msFullscreenElement
+    );
+
+    //
+    this.isFullscreen = isFullscreen;
+    this.detectChanges();
+  };
+
+  private canUseFullscreen(): boolean {
+    return !!(
+      document.fullscreenEnabled ||
+      (document as any).webkitFullscreenEnabled ||
+      (document as any).mozFullScreenEnabled ||
+      (document as any).msFullscreenEnabled
+    );
+  }
+  //#endregion
  //#endregion
 }
@@ -33,13 +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
-  extends XBaseActionModel<XCardActionIdentifier> {}
+export interface XCardActionModel extends XBaseActionModel<XCardActionIdentifier> {}

 //
 //#region Container ...
@@ -187,7 +193,7 @@ export abstract class XCardContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardContainer
+    protected propertyProvider: XCardContainer,
  ) {
    super(
      config,
@@ -196,7 +202,7 @@ export abstract class XCardContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector
+      changeDetector,
    );
  }
  //#endregion
@@ -204,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,
      ),

      //
@@ -242,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) => {
@@ -261,7 +267,7 @@ export abstract class XCardContainerComponent
            ? container.actionProvider
            : this.actionProvider,
        };
-      })
+      }),
    );
  }
  //#endregion
@@ -285,8 +291,7 @@ type TXComponentCardContainer = {
 };

 export interface IXComponentCardContainer
-  extends TXComponentCardContainer,
-    IXBaseComponentContainer {
+  extends TXComponentCardContainer, IXBaseComponentContainer {
  isInPage: XStandardType<boolean>;
  wrapWithCard: XStandardType<boolean>;
 }
@@ -400,7 +405,7 @@ export abstract class XComponentCardContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentCardContainer
+    protected propertyProvider: XComponentCardContainer,
  ) {
    super(
      config,
@@ -409,7 +414,7 @@ export abstract class XComponentCardContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector
+      changeDetector,
    );
  }
  //#endregion
@@ -417,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) => {
@@ -457,7 +462,7 @@ export abstract class XComponentCardContainerComponent
            ? container.cardActionProvider
            : this.cardActionProvider,
        };
-      })
+      }),
    );
  }
  //#endregion
@@ -1,8 +1,10 @@
 <!-- Component Template -->
 <ng-container *ngIf="getValue(wrapWithCard) | async; else componentsRef">
  <x-card
+    #chartCard
    class="x-card"
    [showActions]="true"
+    [actionProvider]="cardActionProvider"
    [color]="getValue(cardColor) | async"
    [ngClass]="getValue(cssClass) | async"
    [isInPage]="getValue(isInPage) | async"
@@ -41,6 +43,7 @@
  >
    <!-- Toolbar -->
    <x-action-bar
+      #chartActionBar
      [color]="actionBarColor"
      [cssClass]="actionBarCssClass"
      [actionProvider]="actionBarActionProvider"
@@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common';
 import { XCardModule } from '../x-card/x-card.module';
 import { XIconModule } from '../x-icon/x-icon.module';
 import { XChartComponent } from './x-chart.component';
-import { XActionBarModule } from 'x-framework-components';
 import { XSlotterModule } from '../x-slotter/x-slotter.module';
+import { XActionBarModule } from '../x-action-bar/x-action-bar.module';
 import { XBaseComponentModule } from '../modules/x-base-component.module';

@NgModule({
@@ -17,32 +17,32 @@ import {
  XColorIdentifier,
  XResourceIdentifier,
  XColorWithBrightness,
+  getXColorValue,
 } from 'x-framework-core';
 import {
  XCardActionModel,
  XComponentCardContainer,
  IXComponentCardContainer,
-  XComponentCardContainerComponent,
 } from '../x-card/x-card.typings';
-import { concatMap, map } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
+import {
+  XBaseContainer,
+  XBaseContainerComponent,
+} from '../classes/i-x-base.container';
+import {
+  XActionBarItem,
+  XActionBarActionModel,
+  XActionBarActionFiredModel,
+  XComponentActionBarContainer,
+  IXComponentActionBarContainer,
+} from '../x-action-bar/x-action-bar.typings';
 import { forkJoin, Observable, Subject } from 'rxjs';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import { XManagerService } from 'x-framework-services';
 import { XBaseActionModel } from '../classes/x-base-action.model';
 import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
-import { XFrameworkComponentsConfig } from '../config/x-framework-components.config';
-import {
-  IXComponentActionBarContainer,
-  XActionBarActionFiredModel,
-  XActionBarActionModel,
-  XActionBarItem,
-  XComponentActionBarContainer,
-} from '../x-action-bar/x-action-bar.typings';
 import { XPopoverPresentOptions } from '../dialogs/x-popover/x-popover.typings';
-import {
-  XBaseContainer,
-  XBaseContainerComponent,
-} from '../classes/i-x-base.container';
+import { XFrameworkComponentsConfig } from '../config/x-framework-components.config';

 //
 //#region Chart ...
@@ -3287,6 +3287,28 @@ export interface XChartAvailableActionBarItem {
  popoverPresentOptions?: XPopoverPresentOptions;
 }

+export interface XChartMouseEvent {
+  e: MouseEvent;
+  options?: XChartEventOpts;
+}
+
+export interface XChartKeyboardEvent {
+  e: KeyboardEvent;
+  options?: XChartEventOpts;
+}
+
+export enum XChartTextAlign {
+  Start = 'start',
+  Center = 'center',
+  End = 'end',
+}
+
+export type XChartTextAlignIdentifier = XChartTextAlign | string;
+
+export function isChartTextAlign(value: XChartTextAlignIdentifier) {
+  return isValueInEnum(value, Object.assign({}, XChartTextAlign));
+}
+
 type TXChartContainer = IXComponentCardContainer &
  IXComponentActionBarContainer;
 export interface IXChartContainer extends TXChartContainer {
@@ -3297,12 +3319,29 @@ export interface IXChartContainer extends TXChartContainer {

  //
  // Chart Props ...
-  autoUpdate: XStandardType<boolean>;
+  zoomStep: XStandardType<number>;
  options: XStandardType<XChartOptions>;
  series: XStandardType<XChartSeriesType>;
+  type: XStandardType<XChartTypeIdentifier>;

  //
-  type: XStandardType<XChartTypeIdentifier>;
+  colors: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+
+  //
+  title: XStandardType<XResourceIdentifier>;
+  titleAlign: XStandardType<XChartTextAlignIdentifier>;
+
+  //
+  subTitle: XStandardType<XResourceIdentifier>;
+  subTitleAlign: XStandardType<XChartTextAlignIdentifier>;
+
+  //
+  // Chart Colors ...
+  gridColor: XStandardType<XColorIdentifier>;
+  titleColor: XStandardType<XColorIdentifier>;
+  subTitleColor: XStandardType<XColorIdentifier>;
+  foregroundColor: XStandardType<XColorIdentifier>;
+  backgroundColor: XStandardType<XColorIdentifier>;

  //
  //#region ActionBar ...
@@ -3313,10 +3352,111 @@ export interface IXChartContainer extends TXChartContainer {
  //#endregion

  //
-  // Events ...
-  chartRendered: EventEmitter<void>;
-  dataPointSelected: EventEmitter<any>;
-  zoomed: EventEmitter<any>;
+  //#region Events ...
+  click: EventEmitter<XChartMouseEvent>;
+  keyUp: EventEmitter<XChartKeyboardEvent>;
+  zoomed: EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>;
+  keyDown: EventEmitter<XChartKeyboardEvent>;
+  drillUp: EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>;
+  mounted: EventEmitter<XChartEventOpts>;
+  updated: EventEmitter<XChartEventOpts>;
+  measured: EventEmitter<{
+    from: { x: any; y: any };
+    to: { x: any; y: any };
+    dx: number;
+    dy: number;
+    percentChange: number;
+    slope: number;
+  }>;
+  scrolled: EventEmitter<{ xaxis: { min: number; max: number } }>;
+  mouseMove: EventEmitter<XChartMouseEvent>;
+  selection: EventEmitter<{
+    xaxis?: { min: number; max: number };
+    yaxis?: { min: number; max: number };
+  }>;
+  beatChange: EventEmitter<XChartStoryboardBeatInfo>;
+  mouseLeave: EventEmitter<XChartMouseEvent>;
+  beforeZoom: EventEmitter<{ xaxis: { min: number; max: number } }>;
+  legendClick: EventEmitter<{
+    seriesIndex?: number;
+    options?: XChartEventOpts;
+  }>;
+  markerClick: EventEmitter<XChartMouseEvent>;
+  crossFilter: EventEmitter<{
+    xaxis: { min: number; max: number };
+    sourceChartID?: string;
+  }>;
+  beforeMount: EventEmitter<XChartEventOpts>;
+  drillDownEnd: EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>;
+  animationEnd: EventEmitter<XChartEventOpts>;
+  filterChange: EventEmitter<{
+    filters: Record<string, any>;
+    filteredCount: number;
+    total: number;
+    sourceChartID?: string;
+    key?: any;
+  }>;
+  brushScrolled: EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>;
+  drillDownStart: EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>;
+  drillDownError: EventEmitter<{
+    info: { id: string | number | null; error: any };
+    options?: XChartEventOpts;
+  }>;
+  xAxisLabelClick: EventEmitter<XChartMouseEvent>;
+  beforeResetZoom: EventEmitter<XChartEventOpts>;
+  annotationEdited: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    text: string;
+  }>;
+  annotationStyled: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    label?: any;
+    marker?: any;
+  }>;
+  annotationDragged: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x: any;
+    y: any;
+    x2?: any;
+    y2?: any;
+  }>;
+  annotationCreated: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x?: any;
+    y?: any;
+  }>;
+  annotationDeleted: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+  }>;
+  dataPointSelection: EventEmitter<XChartMouseEvent>;
+  dataPointMouseEnter: EventEmitter<XChartMouseEvent>;
+  dataPointMouseLeave: EventEmitter<XChartMouseEvent>;
+  //#endregion
 }

@Injectable({
@@ -3327,13 +3467,44 @@ export class XChartContainer
  implements Readonly<IXChartContainer>
 {
  //
-  readonly options: XStandardType<XChartOptions>;
-  readonly series: XStandardType<XChartSeriesType>;
-  readonly autoUpdate: XStandardType<boolean> = true;
-  readonly cssClass: XStandardType<XOneOrManyType<string>>;
  readonly actionProvider = new Subject<XChartActionModel>();
+  readonly cssClass: XStandardType<XOneOrManyType<string>>;
+
+  //
+  // Chart Props ...
+  readonly options: XStandardType<XChartOptions>;
+  readonly zoomStep: XStandardType<number> = 0.125;
+  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> =
+    XChartTextAlign.Center;
+
+  //
+  readonly subTitle: XStandardType<XResourceIdentifier>;
+  readonly subTitleAlign: XStandardType<XChartTextAlignIdentifier> =
+    XChartTextAlign.Center;
+
+  //
+  // Chart Colors ...
+  readonly gridColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Medium;
+  readonly titleColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Dark;
+  readonly subTitleColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Dark;
+  readonly foregroundColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Dark;
+  readonly backgroundColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Light;
+
  //
  readonly availableActionBarItems: XStandardType<
    XOneOrManyType<XChartAvailableActionBarItem>
@@ -3342,9 +3513,115 @@ export class XChartContainer
    XColorWithBrightness.Dark;

  //
-  readonly zoomed = new EventEmitter<any>();
-  readonly chartRendered = new EventEmitter<void>();
-  readonly dataPointSelected = new EventEmitter<any>();
+  //#region Events ...
+  readonly click = new EventEmitter<XChartMouseEvent>();
+  readonly keyUp = new EventEmitter<XChartKeyboardEvent>();
+  readonly zoomed = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>();
+  readonly keyDown = new EventEmitter<XChartKeyboardEvent>();
+  readonly drillUp = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+  readonly mounted = new EventEmitter<XChartEventOpts>();
+  readonly updated = new EventEmitter<XChartEventOpts>();
+  readonly measured = new EventEmitter<{
+    from: { x: any; y: any };
+    to: { x: any; y: any };
+    dx: number;
+    dy: number;
+    percentChange: number;
+    slope: number;
+  }>();
+  readonly scrolled = new EventEmitter<{
+    xaxis: { min: number; max: number };
+  }>();
+  readonly mouseMove = new EventEmitter<XChartMouseEvent>();
+  readonly selection = new EventEmitter<{
+    xaxis?: { min: number; max: number };
+    yaxis?: { min: number; max: number };
+  }>();
+  readonly beatChange = new EventEmitter<XChartStoryboardBeatInfo>();
+  readonly mouseLeave = new EventEmitter<XChartMouseEvent>();
+  readonly beforeZoom = new EventEmitter<{
+    xaxis: { min: number; max: number };
+  }>();
+  readonly legendClick = new EventEmitter<{
+    seriesIndex?: number;
+    options?: XChartEventOpts;
+  }>();
+  readonly markerClick = new EventEmitter<XChartMouseEvent>();
+  readonly crossFilter = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    sourceChartID?: string;
+  }>();
+  readonly beforeMount = new EventEmitter<XChartEventOpts>();
+  readonly drillDownEnd = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+  readonly animationEnd = new EventEmitter<XChartEventOpts>();
+  readonly filterChange = new EventEmitter<{
+    filters: Record<string, any>;
+    filteredCount: number;
+    total: number;
+    sourceChartID?: string;
+    key?: any;
+  }>();
+  readonly brushScrolled = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>();
+  readonly drillDownStart = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+  readonly drillDownError = new EventEmitter<{
+    info: { id: string | number | null; error: any };
+    options?: XChartEventOpts;
+  }>();
+  readonly xAxisLabelClick = new EventEmitter<XChartMouseEvent>();
+  readonly beforeResetZoom = new EventEmitter<XChartEventOpts>();
+  readonly annotationEdited = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    text: string;
+  }>();
+  readonly annotationStyled = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    label?: any;
+    marker?: any;
+  }>();
+  readonly annotationDragged = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x: any;
+    y: any;
+    x2?: any;
+    y2?: any;
+  }>();
+  readonly annotationCreated = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x?: any;
+    y?: any;
+  }>();
+  readonly annotationDeleted = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+  }>();
+  readonly dataPointSelection = new EventEmitter<XChartMouseEvent>();
+  readonly dataPointMouseEnter = new EventEmitter<XChartMouseEvent>();
+  readonly dataPointMouseLeave = new EventEmitter<XChartMouseEvent>();
+  //#endregion

  //
  //#region ComponentActionBar Props ...
@@ -3428,7 +3705,10 @@ export abstract class XChartContainerComponent
  series: XStandardType<XChartSeriesType> = this.propertyProvider.series;

  @Input()
-  autoUpdate: XStandardType<boolean> = this.propertyProvider.autoUpdate;
+  zoomStep: XStandardType<number> = this.propertyProvider.zoomStep;
+
+  @Input()
+  colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> = this.propertyProvider.colors;

  @Input()
  defaultActionBarItemColor: XStandardType<XColorIdentifier> =
@@ -3440,15 +3720,219 @@ export abstract class XChartContainerComponent
  > = this.propertyProvider.availableActionBarItems;

  //
-  // Events ...
+
+  @Input()
+  title: XStandardType<XResourceIdentifier> = this.propertyProvider.title;
+
+  @Input()
+  titleAlign: XStandardType<XChartTextAlignIdentifier> =
+    this.propertyProvider.titleAlign;
+
+  @Input()
+  subTitle: XStandardType<XResourceIdentifier> = this.propertyProvider.subTitle;
+
+  @Input()
+  subTitleAlign: XStandardType<XChartTextAlignIdentifier> =
+    this.propertyProvider.subTitleAlign;
+
+  //
+
+  @Input()
+  gridColor: XStandardType<XColorIdentifier> = this.propertyProvider.gridColor;
+
+  @Input()
+  titleColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.titleColor;
+
+  @Input()
+  subTitleColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.subTitleColor;
+
+  @Input()
+  foregroundColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.foregroundColor;
+
+  @Input()
+  backgroundColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.backgroundColor;
+
+  //
+  //#region Events ...
  @Output()
-  chartRendered: EventEmitter<void> = new EventEmitter();
+  click = new EventEmitter<XChartMouseEvent>();

  @Output()
-  dataPointSelected: EventEmitter<any> = new EventEmitter();
+  keyUp = new EventEmitter<XChartKeyboardEvent>();

  @Output()
-  zoomed: EventEmitter<any> = new EventEmitter();
+  zoomed = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>();
+
+  @Output()
+  keyDown = new EventEmitter<XChartKeyboardEvent>();
+
+  @Output()
+  drillUp = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  mounted = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  updated = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  measured = new EventEmitter<{
+    from: { x: any; y: any };
+    to: { x: any; y: any };
+    dx: number;
+    dy: number;
+    percentChange: number;
+    slope: number;
+  }>();
+
+  @Output()
+  scrolled = new EventEmitter<{
+    xaxis: { min: number; max: number };
+  }>();
+
+  @Output()
+  mouseMove = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  selection = new EventEmitter<{
+    xaxis?: { min: number; max: number };
+    yaxis?: { min: number; max: number };
+  }>();
+
+  @Output()
+  beatChange = new EventEmitter<XChartStoryboardBeatInfo>();
+
+  @Output()
+  mouseLeave = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  beforeZoom = new EventEmitter<{
+    xaxis: { min: number; max: number };
+  }>();
+
+  @Output()
+  legendClick = new EventEmitter<{
+    seriesIndex?: number;
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  markerClick = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  crossFilter = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    sourceChartID?: string;
+  }>();
+
+  @Output()
+  beforeMount = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  drillDownEnd = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  animationEnd = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  filterChange = new EventEmitter<{
+    filters: Record<string, any>;
+    filteredCount: number;
+    total: number;
+    sourceChartID?: string;
+    key?: any;
+  }>();
+
+  @Output()
+  brushScrolled = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>();
+
+  @Output()
+  drillDownStart = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  drillDownError = new EventEmitter<{
+    info: { id: string | number | null; error: any };
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  xAxisLabelClick = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  beforeResetZoom = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  annotationEdited = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    text: string;
+  }>();
+
+  @Output()
+  annotationStyled = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    label?: any;
+    marker?: any;
+  }>();
+
+  @Output()
+  annotationDragged = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x: any;
+    y: any;
+    x2?: any;
+    y2?: any;
+  }>();
+
+  @Output()
+  annotationCreated = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x?: any;
+    y?: any;
+  }>();
+
+  @Output()
+  annotationDeleted = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+  }>();
+
+  @Output()
+  dataPointSelection = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  dataPointMouseEnter = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  dataPointMouseLeave = new EventEmitter<XChartMouseEvent>();
+  //#endregion

  //
  //#region ComponentCard Props ...
@@ -3558,10 +4042,40 @@ 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),
-      autoUpdate: this.getValue(
-        container ? container.autoUpdate : this.autoUpdate,
+      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(
+        container ? container.titleAlign : this.titleAlign,
+      ),
+
+      //
+      subTitle: this.getValue(container ? container.subTitle : this.subTitle),
+      subTitleAlign: this.getValue(
+        container ? container.subTitleAlign : this.subTitleAlign,
+      ),
+
+      //
+      gridColor: this.getValue(
+        container ? container.gridColor : this.gridColor,
+      ),
+      titleColor: this.getValue(
+        container ? container.titleColor : this.titleColor,
+      ),
+      subTitleColor: this.getValue(
+        container ? container.subTitleColor : this.subTitleColor,
+      ),
+      foregroundColor: this.getValue(
+        container ? container.foregroundColor : this.foregroundColor,
+      ),
+      backgroundColor: this.getValue(
+        container ? container.backgroundColor : this.backgroundColor,
      ),

      //
@@ -3639,11 +4153,73 @@ export abstract class XChartContainerComponent
        actionBarActionProvider: container
          ? container.actionBarActionProvider
          : this.actionBarActionProvider,
+
        //
-        zoomed: this.zoomed,
-        chartRendered: this.chartRendered,
-        dataPointSelected: this.dataPointSelected,
-        actionBarActionFired: this.actionBarActionFired,
+        //#region Events ...
+        click: container ? container.click : this.click,
+        keyUp: container ? container.keyUp : this.keyUp,
+        zoomed: container ? container.zoomed : this.zoomed,
+        keyDown: container ? container.keyDown : this.keyDown,
+        drillUp: container ? container.drillUp : this.drillUp,
+        mounted: container ? container.mounted : this.mounted,
+        updated: container ? container.updated : this.updated,
+        measured: container ? container.measured : this.measured,
+        scrolled: container ? container.scrolled : this.scrolled,
+        mouseMove: container ? container.mouseMove : this.mouseMove,
+        selection: container ? container.selection : this.selection,
+        beatChange: container ? container.beatChange : this.beatChange,
+        mouseLeave: container ? container.mouseLeave : this.mouseLeave,
+        beforeZoom: container ? container.beforeZoom : this.beforeZoom,
+        legendClick: container ? container.legendClick : this.legendClick,
+        markerClick: container ? container.markerClick : this.markerClick,
+        crossFilter: container ? container.crossFilter : this.crossFilter,
+        beforeMount: container ? container.beforeMount : this.beforeMount,
+        drillDownEnd: container ? container.drillDownEnd : this.drillDownEnd,
+        animationEnd: container ? container.animationEnd : this.animationEnd,
+        filterChange: container ? container.filterChange : this.filterChange,
+        brushScrolled: container ? container.brushScrolled : this.brushScrolled,
+        drillDownStart: container
+          ? container.drillDownStart
+          : this.drillDownStart,
+        drillDownError: container
+          ? container.drillDownError
+          : this.drillDownError,
+        xAxisLabelClick: container
+          ? container.xAxisLabelClick
+          : this.xAxisLabelClick,
+        beforeResetZoom: container
+          ? container.beforeResetZoom
+          : this.beforeResetZoom,
+        annotationEdited: container
+          ? container.annotationEdited
+          : this.annotationEdited,
+        annotationStyled: container
+          ? container.annotationStyled
+          : this.annotationStyled,
+        annotationDragged: container
+          ? container.annotationDragged
+          : this.annotationDragged,
+        annotationCreated: container
+          ? container.annotationCreated
+          : this.annotationCreated,
+        annotationDeleted: container
+          ? container.annotationDeleted
+          : this.annotationDeleted,
+        dataPointSelection: container
+          ? container.dataPointSelection
+          : this.dataPointSelection,
+        dataPointMouseEnter: container
+          ? container.dataPointMouseEnter
+          : this.dataPointMouseEnter,
+        dataPointMouseLeave: container
+          ? container.dataPointMouseLeave
+          : this.dataPointMouseLeave,
+
+        //
+        actionBarActionFired: container
+          ? container.actionBarActionFired
+          : this.actionBarActionFired,
+        //#endregion
      })),
    );
  }
@@ -145,6 +145,7 @@ export enum XIconNames {
  replay = 'replay',
  x_axis = 'x_axis',
  y_axis = 'y_axis',
+  zoom_in = 'zoom_in',
  xy_axis = 'xy_axis',
  visible = 'visible',
  checked = 'checked',
@@ -171,6 +172,7 @@ export enum XIconNames {
  capture = 'capture',
  live_tv = 'live_tv',
  sd_card = 'sd_card',
+  zoom_out = 'zoom_out',
  verified = 'verified',
  collapse = 'collapse',
  arrow_up = 'arrow_up',
@@ -545,11 +547,13 @@ export const XProvidedIcons = {
  preview: 'preview',
  heading: 'heading',
  refresh: 'refresh',
+  zoom_in: 'zoom_in',
  lock: 'lock-closed',
  unlock: 'lock-open',
  un_checked: 'close',
  survey: 'newspaper',
  chat_box: 'chatbox',
+  zoom_out: 'zoom_out',
  verified: 'verified',
  arrow_up: 'arrow-up',
  business: 'business',
@@ -856,6 +860,7 @@ export const XCustomIcons: string[] = [
  XIconNames.italic,
  XIconNames.x_axis,
  XIconNames.y_axis,
+  XIconNames.zoom_in,
  XIconNames.xy_axis,
  XIconNames.toolbar,
  XIconNames.devices,
@@ -875,6 +880,7 @@ export const XCustomIcons: string[] = [
  XIconNames.monitor,
  XIconNames.preview,
  XIconNames.heading,
+  XIconNames.zoom_out,
  XIconNames.dropdown,
  XIconNames.add_call,
  XIconNames.sim_card,
Author	SHA1	Message	Date
saherelm	752efe3e3c	add color properties has issues ...	2026-08-31 22:24:40 +03:30
saherelm	864fa79454	apply fix on chart component fullscreen issues and it's now works well ...	2026-08-31 00:52:12 +03:30
saherelm	174300d9f1	last works on xChart component ...	2026-08-30 23:59:21 +03:30
saherelm	30f944123f	last works for handle card sizing ...	2026-08-29 17:22:55 +03:30
saherelm	921b9e09f8	fix card fullscreen issues, but still some issues on card background color ...	2026-08-29 09:12:39 +03:30
saherelm	2a45504163	uncomplete works on xCard Fullscreen Support ...	2026-08-29 01:14:08 +03:30
saherelm	7c5fcb8f06	try to implement fullscreen support for xCard Component ...	2026-08-29 00:53:50 +03:30
saherelm	2574c98c65	Resetting Git heade ...	2026-08-28 21:00:41 +03:30
saherelm	f9f0408daf	apply all x-chart component works ...	2026-08-28 20:56:50 +03:30
saherelm	e1b8ebe882	apply card component changes side affects ...	2026-08-28 03:36:54 +03:30
saherelm	6c669f8ce2	last ...	2026-08-25 08:49:56 +03:30
saherelm	6ee51454ce	adding toolbar actions simulations on x-chart component ...	2026-08-24 09:38:41 +03:30
saherelm	398f098b8b	simulate chart toolbar actions ...	2026-08-24 09:15:11 +03:30
saherelm	78f1ae00aa	apply some features on x-chart ...	2026-08-24 01:32:02 +03:30
saherelm	c01e6524e4	add new icons ...	2026-08-24 00:15:08 +03:30
saherelm	1c58d263c3	fix dependecy issue ...	2026-08-22 09:02:53 +03:30