add color properties has issues ...

package.json

@@ -58,6 +58,7 @@
     "@types/uuid": "^8.3.1",
     "ace-builds": "^1.11.2",
     "angular-gridster2": "^12.1.0",
+    "apexcharts": "^6.10.0",
     "crypto-js": "^4.0.0",
     "dom-to-image": "^2.6.0",
     "howler": "^2.2.3",

projects/x-framework-components/src/lib/assets/icon/svg/csv.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="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>

projects/x-framework-components/src/lib/assets/icon/svg/png.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="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>

projects/x-framework-components/src/lib/assets/icon/svg/range_selection.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="M120-120v-720h80v720h-80Zm640 0v-720h80v720h-80ZM280-440v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80Z" />
+</svg>

projects/x-framework-components/src/lib/assets/icon/svg/x_axis.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="m320-160-56-57 103-103H80v-80h287L264-503l56-57 200 200-200 200Zm320-240L440-600l200-200 56 57-103 103h287v80H593l103 103-56 57Z" />
+</svg>

projects/x-framework-components/src/lib/assets/icon/svg/xy_axis.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="m136-80-56-56 264-264H160v-80h320v320h-80v-184L136-80Zm344-400v-320h80v184l264-264 56 56-264 264h184v80H480Z" />
+</svg>

projects/x-framework-components/src/lib/assets/icon/svg/y_axis.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="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>

projects/x-framework-components/src/lib/assets/icon/svg/zoom_in.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>

projects/x-framework-components/src/lib/assets/icon/svg/zoom_out.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>

projects/x-framework-components/src/lib/classes/x-size.model..ts

@@ -0,0 +1,4 @@
+export interface XSizeModel {
+    width?: number;
+    height?: number;
+}

projects/x-framework-components/src/lib/component-templates/component-templates.module.ts

@@ -42,6 +42,7 @@ import {
 } from './x-description-list.component.templates';
 import { XMapModule } from '../x-map/x-map.module';
 import { XFabModule } from '../x-fab/x-fab.module';
+import { XIDEModule } from '../x-ide/x-ide.module';
 import { XFormModule } from '../x-form/x-form.module';
 import { XGridModule } from '../x-grid/x-grid.module';
 import { XIconModule } from '../x-icon/x-icon.module';
@@ -53,8 +54,10 @@ import { XTableModule } from '../x-table/x-table.module';
 import { XThemeModule } from '../x-theme/x-theme.module';
 import { XColorModule } from '../x-color/x-color.module';
 import { XEmptyModule } from '../x-empty/x-empty.module';
+import { XChartModule } from '../x-chart/x-chart.module';
 import { XSliderModule } from '../x-slider/x-slider.module';
 import { XButtonModule } from '../x-button/x-button.module';
+import { XIdeTestComponent } from './x-ide.component.template';
 import { XCounterModule } from '../x-counter/x-counter.module';
 import { XSlotterModule } from '../x-slotter/x-slotter.module';
 import { XSpinnerModule } from '../x-spinner/x-spinner.module';
@@ -66,6 +69,7 @@ import { XMarkdownModule } from '../x-markdown/x-markdown.module';
 import { XFormTestComponent } from './x-form.component.templates';
 import { XGridTestComponent } from './x-grid.component.templates';
 import { XIconTestComponent } from './x-icon.component.templates';
+import { XChartTestComponent } from './x-chart.component.template';
 import { XTableTestComponent } from './x-table.component.templates';
 import { XColorTestComponent } from './x-color.component.templates';
 import { XThumbnailModule } from '../x-thumbnail/x-thumbnail.module';
@@ -119,6 +123,12 @@ import { XExpandablePandelTestComponent } from './x-expandable-panel.component.t
     // x-button ...
     XButtonTestComponent,
     //
+    // x-ide ...
+    XIdeTestComponent,
+    //
+    // x-chart ...
+    XChartTestComponent,
+    //
     // x-card ...
     XCardTestComponent,
     XComponentCardTestComponent,
@@ -245,6 +255,7 @@ import { XExpandablePandelTestComponent } from './x-expandable-panel.component.t
     XBaseComponentModule,
 
     //
+    XIDEModule,
     XFabModule,
     XMapModule,
     XPageModule,
@@ -255,6 +266,7 @@ import { XExpandablePandelTestComponent } from './x-expandable-panel.component.t
     XTabsModule,
     XListModule,
     XGridModule,
+    XChartModule,
     XColorModule,
     XTableModule,
     XThemeModule,

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

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { XChartContainerComponent } from '../x-chart/x-chart.typings';
+
+@Component({
+  template: `
+    <ng-container *ngIf="extractProps() | async as props">
+      <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>
+    </ng-container>
+  `,
+})
+export class XChartTestComponent extends XChartContainerComponent {}

projects/x-framework-components/src/lib/component-templates/x-ide.component.template.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { XIDEContainerComponent } from '../x-ide/x-ide.typings';
+
+@Component({
+  template: `
+    <ng-container *ngIf="extractProps() | async as props">
+      <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>
+    </ng-container>
+  `,
+})
+export class XIdeTestComponent extends XIDEContainerComponent {}

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

@@ -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"
   >

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

@@ -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;

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

@@ -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 { XSizeModel } from '../classes/x-size.model.';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+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
 }

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

@@ -2,14 +2,12 @@ import {
   Input,
   Inject,
   NgZone,
-  Output,
   Component,
   Renderer2,
   ElementRef,
   Injectable,
-  EventEmitter,
-  ChangeDetectorRef,
   TemplateRef,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {
   XStandardType,
@@ -35,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
+export interface XCardActionModel extends XBaseActionModel<XCardActionIdentifier> {}
-  extends XBaseActionModel<XCardActionIdentifier> {}
 
 //
 //#region Container ...
@@ -189,7 +193,7 @@ export abstract class XCardContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardContainer
+    protected propertyProvider: XCardContainer,
   ) {
     super(
       config,
@@ -198,7 +202,7 @@ export abstract class XCardContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -206,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,
       ),
 
       //
@@ -244,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) => {
@@ -263,7 +267,7 @@ export abstract class XCardContainerComponent
             ? container.actionProvider
             : this.actionProvider,
         };
-      })
+      }),
     );
   }
   //#endregion
@@ -287,8 +291,7 @@ type TXComponentCardContainer = {
 };
 
 export interface IXComponentCardContainer
-  extends TXComponentCardContainer,
+  extends TXComponentCardContainer, IXBaseComponentContainer {
-    IXBaseComponentContainer {
   isInPage: XStandardType<boolean>;
   wrapWithCard: XStandardType<boolean>;
 }
@@ -402,7 +405,7 @@ export abstract class XComponentCardContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentCardContainer
+    protected propertyProvider: XComponentCardContainer,
   ) {
     super(
       config,
@@ -411,7 +414,7 @@ export abstract class XComponentCardContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -419,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) => {
@@ -459,7 +462,7 @@ export abstract class XComponentCardContainerComponent
             ? container.cardActionProvider
             : this.cardActionProvider,
         };
-      })
+      }),
     );
   }
   //#endregion

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

@@ -0,0 +1,63 @@
+<!-- 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"
+    [showHeader]="
+      (notEmptyValue(cardTitle) | async) ||
+      (notEmptyValue(cardSubTitle) | async)
+    "
+    [subTitle]="getResourceValue(cardSubTitle)"
+    [title]="getResourceValue(cardTitle) | async"
+    [showFooter]="getValue(cardShowFooter) | async"
+    [showActions]="getValue(cardShowActions) | async"
+    [foregroundColor]="getValue(cardForegroundColor) | async"
+  >
+    <!-- Content -->
+    <ng-container *ngTemplateOutlet="componentsRef"></ng-container>
+
+    <!-- Actions -->
+    <div class="x-actions" [ngClass]="getValue(cssClass) | async" actions>
+      <ng-content select="[actions]"></ng-content>
+    </div>
+
+    <!-- Footer -->
+    <div footer *ngIf="getValue(cardShowFooter) | async">
+      <ng-content select="[footer]"></ng-content>
+    </div>
+  </x-card>
+</ng-container>
+
+<!-- Component's itSelf Template -->
+<ng-template #componentsRef>
+  <!-- Component Box ... -->
+  <div
+    class="x-chart x-wrapper"
+    [class.mobile]="isMobileUi$ | async"
+    [ngClass]="getValue(cssClass) | async"
+  >
+    <!-- Toolbar -->
+    <x-action-bar
+      #chartActionBar
+      [color]="actionBarColor"
+      [cssClass]="actionBarCssClass"
+      [actionProvider]="actionBarActionProvider"
+      [foregroundColor]="actionBarForegroundColor"
+      (actionFired)="handleActionBarActionFired($event)"
+      *ngIf="
+        (getValue(showActionBar) | async) &&
+        (hasChildValue(actionBarActions) | async) &&
+        (hasChildValue(availableActionBarItems) | async)
+      "
+      [actions]="getArrayValue(actionBarActions) | async"
+    ></x-action-bar>
+
+    <!-- Chart Box -->
+    <div #chartContainer class="x-chart-container"></div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.x-chart-wrapper {
+  width: 100%;
+  height: 100%;
+  min-height: 300px; /* ارتفاع پیش‌فرض برای جلوگیری از فروپاشی layout */
+}
+
+.x-chart-container {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+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 { 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({
+  providers: [],
+  entryComponents: [],
+  declarations: [XChartComponent],
+  imports: [
+    XCardModule,
+    XIconModule,
+    CommonModule,
+    XSlotterModule,
+    XActionBarModule,
+    XBaseComponentModule,
+  ],
+  exports: [
+    XCardModule,
+    XIconModule,
+    CommonModule,
+    XSlotterModule,
+    XChartComponent,
+    XActionBarModule,
+    XBaseComponentModule,
+  ],
+})
+export class XChartModule {}

projects/x-framework-components/src/lib/x-framework-components.module.ts

@@ -18,6 +18,7 @@ import { XTableModule } from './x-table/x-table.module';
 import { XFrameworkCoreModule } from 'x-framework-core';
 import { XThemeModule } from './x-theme/x-theme.module';
 import { XColorModule } from './x-color/x-color.module';
+import { XChartModule } from './x-chart/x-chart.module';
 import { XSliderModule } from './x-slider/x-slider.module';
 import { XButtonModule } from './x-button/x-button.module';
 import { XDialogsModule } from './dialogs/x-dialog.module';
@@ -77,6 +78,7 @@ import { XDescriptionListModule } from './x-description-list/x-description-list.
     XListModule,
     XTabsModule,
     XGridModule,
+    XChartModule,
     XFrameModule,
     XEmptyModule,
     XColorModule,
@@ -136,6 +138,7 @@ import { XDescriptionListModule } from './x-description-list/x-description-list.
     XTabsModule,
     XGridModule,
     XEmptyModule,
+    XChartModule,
     XFrameModule,
     XColorModule,
     XTableModule,

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

@@ -42,6 +42,8 @@ export enum XIconNames {
   tv = 'tv',
   ol = 'ol',
   ul = 'ul',
+  csv = 'csv',
+  png = 'png',
   job = 'job',
   add = 'add',
   sad = 'sad',
@@ -141,6 +143,10 @@ export enum XIconNames {
   flight = 'flight',
   memory = 'memory',
   replay = 'replay',
+  x_axis = 'x_axis',
+  y_axis = 'y_axis',
+  zoom_in = 'zoom_in',
+  xy_axis = 'xy_axis',
   visible = 'visible',
   checked = 'checked',
   unliked = 'unliked',
@@ -166,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',
@@ -353,6 +360,7 @@ export enum XIconNames {
   menu_horizontal = 'menu_horizontal',
   logo_javascript = 'logo_javascript',
   phone_forwarded = 'phone_forwarded',
+  range_selection = 'range_selection',
   string_resources = 'string_resources',
   chatbox_ellipses = 'chatbox_ellipses',
   checkmark_circle = 'checkmark_circle',
@@ -430,6 +438,8 @@ export const XProvidedIcons = {
   mop: 'mop',
   sad: 'sad',
   map: 'map',
+  csv: 'csv',
+  png: 'png',
   mail: 'mail',
   undo: 'undo',
   redo: 'redo',
@@ -509,12 +519,15 @@ export const XProvidedIcons = {
   flight: 'flight',
   memory: 'memory',
   replay: 'replay',
+  x_axis: 'x_axis',
+  y_axis: 'y_axis',
   unknown: 'attach',
   video: 'videocam',
   done: 'checkmark',
   logout: 'log-out',
   avatars: 'images',
   account: 'person',
+  xy_axis: 'xy_axis',
   invite: 'contract',
   archive: 'archive',
   toolbar: 'toolbar',
@@ -534,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',
@@ -738,6 +753,7 @@ export const XProvidedIcons = {
   local_shipping: 'local_shipping',
   cast_connected: 'cast_connected',
   voice_chat_off: 'voice_chat_off',
+  range_selection: 'range_selection',
   logo_javascript: 'logo-javascript',
   phone_forwarded: 'phone_forwarded',
   menu_vertical: 'ellipsis-vertical',
@@ -791,6 +807,8 @@ export const XCustomIcons: string[] = [
   XIconNames.ol,
   XIconNames.ul,
   XIconNames.tv,
+  XIconNames.csv,
+  XIconNames.png,
   XIconNames.dns,
   XIconNames.dvr,
   XIconNames.fax,
@@ -840,6 +858,10 @@ export const XCustomIcons: string[] = [
   XIconNames.replay,
   XIconNames.expand,
   XIconNames.italic,
+  XIconNames.x_axis,
+  XIconNames.y_axis,
+  XIconNames.zoom_in,
+  XIconNames.xy_axis,
   XIconNames.toolbar,
   XIconNames.devices,
   XIconNames.dialogs,
@@ -858,6 +880,7 @@ export const XCustomIcons: string[] = [
   XIconNames.monitor,
   XIconNames.preview,
   XIconNames.heading,
+  XIconNames.zoom_out,
   XIconNames.dropdown,
   XIconNames.add_call,
   XIconNames.sim_card,
@@ -953,6 +976,7 @@ export const XCustomIcons: string[] = [
   XIconNames.cast_connected,
   XIconNames.voice_chat_off,
   XIconNames.phone_forwarded,
+  XIconNames.range_selection,
   XIconNames.document_scanner,
   XIconNames.splitscreen_left,
   XIconNames.close_fullscreen,
@@ -1025,8 +1049,7 @@ export interface IXIconContainer extends IXBaseContainer {
 })
 export class XIconContainer
   extends XBaseContainer
-  implements Readonly<IXIconContainer>
+  implements Readonly<IXIconContainer> {
-{
   //
   //#region Props ...
   readonly actionProvider: Subject<XIconActionModel> =
@@ -1057,8 +1080,7 @@ export class XIconContainer
 })
 export abstract class XIconContainerComponent
   extends XBaseContainerComponent
-  implements IXIconContainer
+  implements IXIconContainer {
-{
   //
   //#region Props ...
   //

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

@@ -1,7 +1,7 @@
 <!-- Component Template -->
 <ng-container *ngIf="getValue(wrapWithCard) | async; else componentsRef">
   <x-card
-    class="v-card v-no-margin-card"
+    class="x-card"
     [color]="getValue(cardColor) | async"
     [ngClass]="getValue(cssClass) | async"
     [isInPage]="getValue(isInPage) | async"
@@ -32,7 +32,11 @@
 
 <!-- Component's itSelf Template -->
 <ng-template #componentsRef>
-  <div class="x-component-wrapper" [ngClass]="getValue(cssClass) | async">
+  <div
+    class="x-component-wrapper"
+    [class.mobile]="isMobileUi$ | async"
+    [ngClass]="getValue(cssClass) | async"
+  >
     <!-- Toolbar -->
     <x-action-bar
       [color]="actionBarColor"

projects/x-framework-components/src/public-api.ts

@@ -17,6 +17,7 @@ export * from './lib/x-grid/x-grid.module';
 export * from './lib/x-page/x-page.module';
 export * from './lib/x-tabs/x-tabs.module';
 export * from './lib/x-tree/x-tree.module';
+export * from './lib/x-chart/x-chart.module';
 export * from './lib/x-theme/x-theme.module';
 export * from './lib/x-table/x-table.module';
 export * from './lib/x-frame/x-frame.module';
@@ -62,6 +63,7 @@ export * from './lib/x-grid/x-grid.component';
 export * from './lib/x-page/x-page.component';
 export * from './lib/x-tabs/x-tabs.component';
 export * from './lib/x-tree/x-tree.component';
+export * from './lib/x-chart/x-chart.component';
 export * from './lib/x-color/x-color.component';
 export * from './lib/x-empty/x-empty.component';
 export * from './lib/x-frame/x-frame.component';
@@ -123,6 +125,7 @@ export * from './lib/x-tree/x-tree.typings';
 export * from './lib/x-empty/x-empty.typings';
 export * from './lib/x-frame/x-frame.typings';
 export * from './lib/x-page/x-page.container';
+export * from './lib/x-chart/x-chart.typings';
 export * from './lib/x-color/x-color.typings';
 export * from './lib/x-theme/x-theme-typings';
 export * from './lib/x-table/x-table.typings';

tsconfig.json

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