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 1078 additions and 1509 deletions
@@ -89,18 +89,6 @@ export class XCardEmptyContainer
    this.cardPropertyProvider.cardSubTitle;
  readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.cardPropertyProvider.cardCssClass;
-
-  //
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardPropertyProvider.cardShowFullScreenButton;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -193,27 +181,6 @@ export class XCardEmptyContainerComponent
  @Input()
  cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.cardCssClass;
-
-  //
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -329,31 +296,6 @@ export class XCardEmptyContainerComponent
      cardSubTitle: this.getValue(
        container ? container.cardSubTitle : this.cardSubTitle
      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
-      ),
      //#endregion

      //
@@ -460,16 +402,6 @@ export class XCardActionBarContainer extends XBaseContainer implements IXCardAct
    this.cardPropertyProvider.cardShowFooter;
  readonly cardShowActions: XStandardType<boolean> =
    this.cardPropertyProvider.cardShowActions;
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardPropertyProvider.cardShowFullScreenButton;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -548,27 +480,6 @@ export class XCardActionBarContainerComponent
  @Input()
  cardActionProvider: Subject<XCardActionModel> =
    this.propertyProvider.cardActionProvider;
-
-  //
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -657,31 +568,6 @@ export class XCardActionBarContainerComponent
      cardSubTitle: this.getValue(
        container ? container.cardSubTitle : this.cardSubTitle
      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
-      ),
      //#endregion

      //
@@ -48,7 +48,9 @@ export interface IXMaxAllowedFilesContainer {
@Injectable({
  providedIn: 'root',
 })
-export class XMaxAllowedFilesContainer implements Readonly<IXMaxAllowedFilesContainer> {
+export class XMaxAllowedFilesContainer
+  implements Readonly<IXMaxAllowedFilesContainer>
+{
  //
  //#region Props ...
  readonly maxAllowedFiles: XStandardType<number> = this.config.maxUploadFiles;
@@ -61,7 +63,7 @@ export class XMaxAllowedFilesContainer implements Readonly<IXMaxAllowedFilesCont
  //#region Constructor ...
  constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
  ) {}
  //#endregion
 }
@@ -77,7 +79,9 @@ export interface IXMaxAllowedSizeContainer {
@Injectable({
  providedIn: 'root',
 })
-export class XMaxAllowedSizeContainer implements Readonly<IXMaxAllowedSizeContainer> {
+export class XMaxAllowedSizeContainer
+  implements Readonly<IXMaxAllowedSizeContainer>
+{
  //
  //#region Props ...
  readonly maxAllowedSize: XStandardType<number> = this.config.maxAllowedSize;
@@ -90,7 +94,7 @@ export class XMaxAllowedSizeContainer implements Readonly<IXMaxAllowedSizeContai
  //#region Constructor ...
  constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
  ) {}
  //#endregion
 }
@@ -106,7 +110,9 @@ export interface IXMinAllowedFileSizeContainer {
@Injectable({
  providedIn: 'root',
 })
-export class XMinAllowedFileSizeContainer implements Readonly<IXMinAllowedFileSizeContainer> {
+export class XMinAllowedFileSizeContainer
+  implements Readonly<IXMinAllowedFileSizeContainer>
+{
  //
  //#region Props ...
  readonly minAllowedFileSize: XStandardType<number> =
@@ -120,7 +126,7 @@ export class XMinAllowedFileSizeContainer implements Readonly<IXMinAllowedFileSi
  //#region Constructor ...
  constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
  ) {}
  //#endregion
 }
@@ -136,7 +142,9 @@ export interface IXMaxAllowedFileSizeContainer {
@Injectable({
  providedIn: 'root',
 })
-export class XMaxAllowedFileSizeContainer implements Readonly<IXMaxAllowedFileSizeContainer> {
+export class XMaxAllowedFileSizeContainer
+  implements Readonly<IXMaxAllowedFileSizeContainer>
+{
  //
  //#region Props ...
  readonly maxAllowedFileSize: XStandardType<number> =
@@ -150,7 +158,7 @@ export class XMaxAllowedFileSizeContainer implements Readonly<IXMaxAllowedFileSi
  //#region Constructor ...
  constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
  ) {}
  //#endregion
 }
@@ -183,7 +191,7 @@ export class XFileRegularContainer implements Readonly<IXFileRegularContainer> {
  //#region Constructor ...
  constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
  ) {}
  //#endregion
 }
@@ -246,7 +254,7 @@ export class XFileContainer implements Readonly<IXFileContainer> {
  //#region Constructor ...
  constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
  ) {}
  //#endregion
 }
@@ -259,9 +267,9 @@ export class XFileContainer implements Readonly<IXFileContainer> {
 })
@Component({
  template: `
-    <!--
+    <!-- 
        <ng-container *ngIf="extractProps() | async as props">
-        </ng-container>
+        </ng-container> 
    -->
  `,
 })
@@ -331,7 +339,7 @@ export abstract class XFileContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XFileContainer,
+    protected propertyProvider: XFileContainer
  ) {
    super(
      config,
@@ -340,7 +348,7 @@ export abstract class XFileContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -348,52 +356,52 @@ export abstract class XFileContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXFileContainer,
+    container?: IXFileContainer
  ): Observable<IXFileContainer> {
    return forkJoin({
      //
      emptyFileException: this.getValue(
-        container ? container.emptyFileException : this.emptyFileException,
+        container ? container.emptyFileException : this.emptyFileException
      ),
      notAllowedFileException: this.getValue(
        container
          ? container.notAllowedFileException
-          : this.notAllowedFileException,
+          : this.notAllowedFileException
      ),
      allowedExtensions: this.getValue(
-        container ? container.allowedExtensions : this.allowedExtensions,
+        container ? container.allowedExtensions : this.allowedExtensions
      ),
      maxAllowedFiles: this.getValue(
-        container ? container.maxAllowedFiles : this.maxAllowedFiles,
+        container ? container.maxAllowedFiles : this.maxAllowedFiles
      ),
      maxAllowedFilesException: this.getValue(
        container
          ? container.maxAllowedFilesException
-          : this.maxAllowedFilesException,
+          : this.maxAllowedFilesException
      ),
      maxAllowedSize: this.getValue(
-        container ? container.maxAllowedSize : this.maxAllowedSize,
+        container ? container.maxAllowedSize : this.maxAllowedSize
      ),
      maxAllowedSizeException: this.getValue(
        container
          ? container.maxAllowedSizeException
-          : this.maxAllowedSizeException,
+          : this.maxAllowedSizeException
      ),
      minAllowedFileSize: this.getValue(
-        container ? container.minAllowedFileSize : this.minAllowedFileSize,
+        container ? container.minAllowedFileSize : this.minAllowedFileSize
      ),
      minAllowedFileSizeException: this.getValue(
        container
          ? container.minAllowedFileSizeException
-          : this.minAllowedFileSizeException,
+          : this.minAllowedFileSizeException
      ),
      maxAllowedFileSize: this.getValue(
-        container ? container.maxAllowedFileSize : this.maxAllowedFileSize,
+        container ? container.maxAllowedFileSize : this.maxAllowedFileSize
      ),
      maxAllowedFileSizeException: this.getValue(
        container
          ? container.maxAllowedFileSizeException
-          : this.maxAllowedFileSizeException,
+          : this.maxAllowedFileSizeException
      ),
    }).pipe(
      map((data) => {
@@ -403,7 +411,7 @@ export abstract class XFileContainerComponent

          //
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -446,16 +454,6 @@ export class XCardFileContainer
    this.cardPropertyProvider.cardSubTitle;
  readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.cardPropertyProvider.cardCssClass;
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardPropertyProvider.cardShowFullScreenButton;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -503,7 +501,7 @@ export class XCardFileContainer
  //#region Constructor ...
  constructor(
    protected cardPropertyProvider: XComponentCardContainer,
-    protected filePropertyProvider: XFileContainer,
+    protected filePropertyProvider: XFileContainer
  ) {
    super();
  }
@@ -558,26 +556,6 @@ export class XCardFileContainerComponent
  @Input()
  cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.cardCssClass;
-
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -643,7 +621,7 @@ export class XCardFileContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardFileContainer,
+    protected propertyProvider: XCardFileContainer
  ) {
    super(
      config,
@@ -652,7 +630,7 @@ export class XCardFileContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -660,107 +638,82 @@ export class XCardFileContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXCardFileContainer,
+    container?: IXCardFileContainer
  ): Observable<IXCardFileContainer> {
    return forkJoin({
      //
      //#region XComponentCard ...
      cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass,
+        container ? container.cardCssClass : this.cardCssClass
      ),
      isInPage: this.getValue(container ? container.isInPage : this.isInPage),
      wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard,
+        container ? container.wrapWithCard : this.wrapWithCard
      ),
      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
      ),
      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,
-      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
+        container ? container.cardSubTitle : this.cardSubTitle
      ),
      //#endregion

      //
      //#region File ...
      emptyFileException: this.getValue(
-        container ? container.emptyFileException : this.emptyFileException,
+        container ? container.emptyFileException : this.emptyFileException
      ),
      notAllowedFileException: this.getValue(
        container
          ? container.notAllowedFileException
-          : this.notAllowedFileException,
+          : this.notAllowedFileException
      ),
      allowedExtensions: this.getValue(
-        container ? container.allowedExtensions : this.allowedExtensions,
+        container ? container.allowedExtensions : this.allowedExtensions
      ),
      maxAllowedFiles: this.getValue(
-        container ? container.maxAllowedFiles : this.maxAllowedFiles,
+        container ? container.maxAllowedFiles : this.maxAllowedFiles
      ),
      maxAllowedFilesException: this.getValue(
        container
          ? container.maxAllowedFilesException
-          : this.maxAllowedFilesException,
+          : this.maxAllowedFilesException
      ),
      maxAllowedSize: this.getValue(
-        container ? container.maxAllowedSize : this.maxAllowedSize,
+        container ? container.maxAllowedSize : this.maxAllowedSize
      ),
      maxAllowedSizeException: this.getValue(
        container
          ? container.maxAllowedSizeException
-          : this.maxAllowedSizeException,
+          : this.maxAllowedSizeException
      ),
      minAllowedFileSize: this.getValue(
-        container ? container.minAllowedFileSize : this.minAllowedFileSize,
+        container ? container.minAllowedFileSize : this.minAllowedFileSize
      ),
      minAllowedFileSizeException: this.getValue(
        container
          ? container.minAllowedFileSizeException
-          : this.minAllowedFileSizeException,
+          : this.minAllowedFileSizeException
      ),
      maxAllowedFileSize: this.getValue(
-        container ? container.maxAllowedFileSize : this.maxAllowedFileSize,
+        container ? container.maxAllowedFileSize : this.maxAllowedFileSize
      ),
      maxAllowedFileSizeException: this.getValue(
        container
          ? container.maxAllowedFileSizeException
-          : this.maxAllowedFileSizeException,
+          : this.maxAllowedFileSizeException
      ),
      //#endregion
    }).pipe(
@@ -774,7 +727,7 @@ export class XCardFileContainerComponent
            ? container.cardActionProvider
            : this.cardActionProvider,
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -787,7 +740,8 @@ export class XCardFileContainerComponent
 type TXCardFileFileDropContainer = IXComponentCardContainer &
  IXFileContainer &
  IXComponentFileDropAreaContainer;
-export interface IXCardFileFileDropContainer extends TXCardFileFileDropContainer {}
+export interface IXCardFileFileDropContainer
+  extends TXCardFileFileDropContainer {}

 //
@Injectable({
@@ -821,16 +775,6 @@ export class XCardFileFileDropContainer
    this.cardPropertyProvider.cardSubTitle;
  readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.cardPropertyProvider.cardCssClass;
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardPropertyProvider.cardShowFullScreenButton;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -955,16 +899,6 @@ export class XCardFileFileDropContainer
    this.fileDropPropertyProvider.fileDropAreaCardSubTitle;
  readonly fileDropAreaCardCssClass: XStandardType<XOneOrManyType<string>> =
    this.fileDropPropertyProvider.fileDropAreaCardCssClass;
-  readonly fileDropAreaCardShowFullScreenButton: XStandardType<boolean> =
-    this.fileDropPropertyProvider.fileDropAreaCardShowFullScreenButton;
-  readonly fileDropAreaCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.fileDropPropertyProvider.fileDropAreaCardEnterFullScreenButtonIcon;
-  readonly fileDropAreaCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.fileDropPropertyProvider.fileDropAreaCardEnterFullScreenButtonColor;
-  readonly fileDropAreaCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.fileDropPropertyProvider.fileDropAreaCardExitFullScreenButtonIcon;
-  readonly fileDropAreaCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.fileDropPropertyProvider.fileDropAreaCardExitFullScreenButtonColor;
  //#endregion
  //#endregion
  //#endregion
@@ -974,7 +908,7 @@ export class XCardFileFileDropContainer
  constructor(
    protected cardPropertyProvider: XComponentCardContainer,
    protected fileDropPropertyProvider: XComponentFileDropAreaContainer,
-    protected filePropertyProvider: XFileContainer,
+    protected filePropertyProvider: XFileContainer
  ) {
    super();
  }
@@ -1029,26 +963,6 @@ export class XCardFileFileDropContainerComponent
  @Input()
  cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.cardCssClass;
-
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -1217,26 +1131,6 @@ export class XCardFileFileDropContainerComponent
  @Input()
  fileDropAreaCardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.fileDropAreaCardCssClass;
-
-  @Input()
-  fileDropAreaCardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.fileDropAreaCardShowFullScreenButton;
-
-  @Input()
-  fileDropAreaCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.fileDropAreaCardEnterFullScreenButtonIcon;
-
-  @Input()
-  fileDropAreaCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.fileDropAreaCardEnterFullScreenButtonColor;
-
-  @Input()
-  fileDropAreaCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.fileDropAreaCardExitFullScreenButtonIcon;
-
-  @Input()
-  fileDropAreaCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.fileDropAreaCardExitFullScreenButtonColor;
  //#endregion
  //#endregion
  //#endregion
@@ -1252,7 +1146,7 @@ export class XCardFileFileDropContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardFileFileDropContainer,
+    protected propertyProvider: XCardFileFileDropContainer
  ) {
    super(
      config,
@@ -1261,7 +1155,7 @@ export class XCardFileFileDropContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -1269,107 +1163,82 @@ export class XCardFileFileDropContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXCardFileFileDropContainer,
+    container?: IXCardFileFileDropContainer
  ): Observable<IXCardFileFileDropContainer> {
    return forkJoin({
      //
      //#region XComponentCard ...
      cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass,
+        container ? container.cardCssClass : this.cardCssClass
      ),
      isInPage: this.getValue(container ? container.isInPage : this.isInPage),
      wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard,
+        container ? container.wrapWithCard : this.wrapWithCard
      ),
      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
      ),
      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,
-      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
+        container ? container.cardSubTitle : this.cardSubTitle
      ),
      //#endregion

      //
      //#region File ...
      emptyFileException: this.getValue(
-        container ? container.emptyFileException : this.emptyFileException,
+        container ? container.emptyFileException : this.emptyFileException
      ),
      notAllowedFileException: this.getValue(
        container
          ? container.notAllowedFileException
-          : this.notAllowedFileException,
+          : this.notAllowedFileException
      ),
      allowedExtensions: this.getValue(
-        container ? container.allowedExtensions : this.allowedExtensions,
+        container ? container.allowedExtensions : this.allowedExtensions
      ),
      maxAllowedFiles: this.getValue(
-        container ? container.maxAllowedFiles : this.maxAllowedFiles,
+        container ? container.maxAllowedFiles : this.maxAllowedFiles
      ),
      maxAllowedFilesException: this.getValue(
        container
          ? container.maxAllowedFilesException
-          : this.maxAllowedFilesException,
+          : this.maxAllowedFilesException
      ),
      maxAllowedSize: this.getValue(
-        container ? container.maxAllowedSize : this.maxAllowedSize,
+        container ? container.maxAllowedSize : this.maxAllowedSize
      ),
      maxAllowedSizeException: this.getValue(
        container
          ? container.maxAllowedSizeException
-          : this.maxAllowedSizeException,
+          : this.maxAllowedSizeException
      ),
      minAllowedFileSize: this.getValue(
-        container ? container.minAllowedFileSize : this.minAllowedFileSize,
+        container ? container.minAllowedFileSize : this.minAllowedFileSize
      ),
      minAllowedFileSizeException: this.getValue(
        container
          ? container.minAllowedFileSizeException
-          : this.minAllowedFileSizeException,
+          : this.minAllowedFileSizeException
      ),
      maxAllowedFileSize: this.getValue(
-        container ? container.maxAllowedFileSize : this.maxAllowedFileSize,
+        container ? container.maxAllowedFileSize : this.maxAllowedFileSize
      ),
      maxAllowedFileSizeException: this.getValue(
        container
          ? container.maxAllowedFileSizeException
-          : this.maxAllowedFileSizeException,
+          : this.maxAllowedFileSizeException
      ),
      //#endregion

@@ -1377,132 +1246,103 @@ export class XCardFileFileDropContainerComponent
      //#region FileDrop ...
      //
      fileDropAreaCssClass: this.getValue(
-        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass,
+        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass
      ),
      fileDropAreaColor: this.getValue(
-        container ? container.fileDropAreaColor : this.fileDropAreaColor,
+        container ? container.fileDropAreaColor : this.fileDropAreaColor
      ),
      fileDropAreaForegroundColor: this.getValue(
        container
          ? container.fileDropAreaForegroundColor
-          : this.fileDropAreaForegroundColor,
+          : this.fileDropAreaForegroundColor
      ),
      fileDropAreaIcon: this.getValue(
-        container ? container.fileDropAreaIcon : this.fileDropAreaIcon,
+        container ? container.fileDropAreaIcon : this.fileDropAreaIcon
      ),
      fileDropAreaMessage: this.getValue(
-        container ? container.fileDropAreaMessage : this.fileDropAreaMessage,
+        container ? container.fileDropAreaMessage : this.fileDropAreaMessage
      ),
      fileDropAreaDisableFileCheck: this.getValue(
        container
          ? container.fileDropAreaDisableFileCheck
-          : this.fileDropAreaDisableFileCheck,
+          : this.fileDropAreaDisableFileCheck
      ),
      fileDropAreaSupportsMultipleFiles: this.getValue(
        container
          ? container.fileDropAreaSupportsMultipleFiles
-          : this.fileDropAreaSupportsMultipleFiles,
+          : this.fileDropAreaSupportsMultipleFiles
      ),
      fileDropAreaAllowedExtensions: this.getValue(
        container
          ? container.fileDropAreaAllowedExtensions
-          : this.fileDropAreaAllowedExtensions,
+          : this.fileDropAreaAllowedExtensions
      ),
      fileDropAreaDragDisabled: this.getValue(
        container
          ? container.fileDropAreaDragDisabled
-          : this.fileDropAreaDragDisabled,
+          : this.fileDropAreaDragDisabled
      ),
      fileDropAreaContentTemplate: this.getValue(
        container
          ? container.fileDropAreaContentTemplate
-          : this.fileDropAreaContentTemplate,
+          : this.fileDropAreaContentTemplate
      ),
      fileDropAreaSuccessColor: this.getValue(
        container
          ? container.fileDropAreaSuccessColor
-          : this.fileDropAreaSuccessColor,
+          : this.fileDropAreaSuccessColor
      ),
      fileDropAreaErrorColor: this.getValue(
        container
          ? container.fileDropAreaErrorColor
-          : this.fileDropAreaErrorColor,
+          : this.fileDropAreaErrorColor
      ),
      fileDropAreaAccentColor: this.getValue(
        container
          ? container.fileDropAreaAccentColor
-          : this.fileDropAreaAccentColor,
+          : this.fileDropAreaAccentColor
      ),
      showFileDropArea: this.getValue(
-        container ? container.showFileDropArea : this.showFileDropArea,
+        container ? container.showFileDropArea : this.showFileDropArea
      ),
      fileDropAreaIsInPage: this.getValue(
-        container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage,
+        container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage
      ),
      fileDropAreaWrapWithCard: this.getValue(
        container
          ? container.fileDropAreaWrapWithCard
-          : this.fileDropAreaWrapWithCard,
+          : this.fileDropAreaWrapWithCard
      ),
      fileDropAreaCardShowFooter: this.getValue(
        container
          ? container.fileDropAreaCardShowFooter
-          : this.fileDropAreaCardShowFooter,
+          : this.fileDropAreaCardShowFooter
      ),
      fileDropAreaCardShowActions: this.getValue(
        container
          ? container.fileDropAreaCardShowActions
-          : this.fileDropAreaCardShowActions,
+          : this.fileDropAreaCardShowActions
      ),
      fileDropAreaCardColor: this.getValue(
-        container
-          ? container.fileDropAreaCardColor
-          : this.fileDropAreaCardColor,
+        container ? container.fileDropAreaCardColor : this.fileDropAreaCardColor
      ),
      fileDropAreaCardForegroundColor: this.getValue(
        container
          ? container.fileDropAreaCardForegroundColor
-          : this.fileDropAreaCardForegroundColor,
+          : this.fileDropAreaCardForegroundColor
      ),
      fileDropAreaCardTitle: this.getValue(
-        container
-          ? container.fileDropAreaCardTitle
-          : this.fileDropAreaCardTitle,
+        container ? container.fileDropAreaCardTitle : this.fileDropAreaCardTitle
      ),
      fileDropAreaCardSubTitle: this.getValue(
        container
          ? container.fileDropAreaCardSubTitle
-          : this.fileDropAreaCardSubTitle,
+          : this.fileDropAreaCardSubTitle
      ),
      fileDropAreaCardCssClass: this.getValue(
        container
          ? container.fileDropAreaCardCssClass
-          : this.fileDropAreaCardCssClass,
-      ),
-      fileDropAreaCardShowFullScreenButton: this.getValue(
-        container
-          ? container.fileDropAreaCardShowFullScreenButton
-          : this.fileDropAreaCardShowFullScreenButton,
-      ),
-      fileDropAreaCardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.fileDropAreaCardEnterFullScreenButtonIcon
-          : this.fileDropAreaCardEnterFullScreenButtonIcon,
-      ),
-      fileDropAreaCardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.fileDropAreaCardEnterFullScreenButtonColor
-          : this.fileDropAreaCardEnterFullScreenButtonColor,
-      ),
-      fileDropAreaCardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.fileDropAreaCardExitFullScreenButtonIcon
-          : this.fileDropAreaCardExitFullScreenButtonIcon,
-      ),
-      fileDropAreaCardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.fileDropAreaCardExitFullScreenButtonColor
-          : this.fileDropAreaCardExitFullScreenButtonColor,
+          : this.fileDropAreaCardCssClass
      ),
      //#endregion
    }).pipe(
@@ -1529,7 +1369,7 @@ export class XCardFileFileDropContainerComponent
          //
          fileDropAreaFilesChangeEmiter: this.fileDropAreaFilesChangeEmiter,
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -32,7 +32,6 @@ import { map } from 'rxjs/operators';
 import { Observable, forkJoin, Subject } from 'rxjs';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import { XManagerService } from 'x-framework-services';
-import { XIconIdentifier } from '../x-icon/x-icon.typings';
 import { IXButtonContainer, XButtonType } from '../x-button/x-button.typings';
 import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
 import { XSlotNameIdentifier, XSlotName } from '../x-slotter/x-slotter.typings';
@@ -275,7 +274,7 @@ export abstract class XNextPrevResetHostContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XNextPrevResetHostContainer,
+    protected propertyProvider: XNextPrevResetHostContainer
  ) {
    super(
      config,
@@ -284,7 +283,7 @@ export abstract class XNextPrevResetHostContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -292,7 +291,7 @@ export abstract class XNextPrevResetHostContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXNextPrevResetHostContainer,
+    container?: IXNextPrevResetHostContainer
  ): Observable<IXNextPrevResetHostContainer> {
    return forkJoin({
      //
@@ -310,7 +309,7 @@ export abstract class XNextPrevResetHostContainerComponent
          onPrev: this.onPrev,
          onReset: this.onReset,
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -322,7 +321,8 @@ export abstract class XNextPrevResetHostContainerComponent
 //
 type TXCardEmptyContainer = IXComponentCardContainer &
  IXNextPrevResetHostContainer;
-export interface IXCardNextPrevResetHostContainer extends TXCardEmptyContainer {}
+export interface IXCardNextPrevResetHostContainer
+  extends TXCardEmptyContainer {}

 //
@Injectable({
@@ -356,16 +356,6 @@ export class XCardNextPrevResetHostContainer
    this.cardPropertyProvider.cardSubTitle;
  readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.cardPropertyProvider.cardCssClass;
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardPropertyProvider.cardShowFullScreenButton;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -400,7 +390,7 @@ export class XCardNextPrevResetHostContainer
  //#region Constructor ...
  constructor(
    protected cardPropertyProvider: XComponentCardContainer,
-    protected nextPrevResetHostPropertyProvider: XNextPrevResetHostContainer,
+    protected nextPrevResetHostPropertyProvider: XNextPrevResetHostContainer
  ) {
    super();
  }
@@ -455,26 +445,6 @@ export class XCardNextPrevResetHostContainerComponent
  @Input()
  cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.cardCssClass;
-
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -519,7 +489,7 @@ export class XCardNextPrevResetHostContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardNextPrevResetHostContainer,
+    protected propertyProvider: XCardNextPrevResetHostContainer
  ) {
    super(
      config,
@@ -528,7 +498,7 @@ export class XCardNextPrevResetHostContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -536,60 +506,35 @@ export class XCardNextPrevResetHostContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXCardNextPrevResetHostContainer,
+    container?: IXCardNextPrevResetHostContainer
  ): Observable<IXCardNextPrevResetHostContainer> {
    return forkJoin({
      //
      //#region XComponentCard ...
      cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass,
+        container ? container.cardCssClass : this.cardCssClass
      ),
      isInPage: this.getValue(container ? container.isInPage : this.isInPage),
      wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard,
+        container ? container.wrapWithCard : this.wrapWithCard
      ),
      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
      ),
      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,
-      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
+        container ? container.cardSubTitle : this.cardSubTitle
      ),
      //#endregion

@@ -616,7 +561,7 @@ export class XCardNextPrevResetHostContainerComponent
          onPrev: this.onPrev,
          onReset: this.onReset,
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -631,7 +576,8 @@ type TXNextPrevResetContainer = IXNextContainer &
  IXResetContainer;
 // tslint:disable-next-line:no-empty-interface
 export interface IXNextPrevResetContainer
-  extends IXBaseContainer, TXNextPrevResetContainer {}
+  extends IXBaseContainer,
+    TXNextPrevResetContainer {}

@Injectable({
  providedIn: 'root',
@@ -691,7 +637,7 @@ export class XNextPrevResetContainer
  constructor(
    protected prevPropertyProvider: XPrevContainer,
    protected nextPropertyProvider: XNextContainer,
-    protected resetpropertyProvider: XResetContainer,
+    protected resetpropertyProvider: XResetContainer
  ) {
    super();
  }
@@ -795,7 +741,7 @@ export abstract class XNextPrevResetContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XNextPrevResetContainer,
+    protected propertyProvider: XNextPrevResetContainer
  ) {
    super(
      config,
@@ -804,7 +750,7 @@ export abstract class XNextPrevResetContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -812,57 +758,57 @@ export abstract class XNextPrevResetContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXNextPrevResetContainer,
+    container?: IXNextPrevResetContainer
  ): Observable<IXNextPrevResetContainer> {
    return forkJoin({
      //
      hasNext: this.getValue(container ? container.hasNext : this.hasNext),
      disableNext: this.getValue(
-        container ? container.disableNext : this.disableNext,
+        container ? container.disableNext : this.disableNext
      ),
      nextConfirmer: this.getValue(
-        container ? container.nextConfirmer : this.nextConfirmer,
+        container ? container.nextConfirmer : this.nextConfirmer
      ),
      nextPosition: this.getValue(
-        container ? container.nextPosition : this.nextPosition,
+        container ? container.nextPosition : this.nextPosition
      ),
      nextCssClass: this.getValue(
-        container ? container.nextCssClass : this.nextCssClass,
+        container ? container.nextCssClass : this.nextCssClass
      ),
      nextButton: this.getValue(
-        container ? container.nextButton : this.nextButton,
+        container ? container.nextButton : this.nextButton
      ),
      hasPrev: this.getValue(container ? container.hasPrev : this.hasPrev),
      disablePrev: this.getValue(
-        container ? container.disablePrev : this.disablePrev,
+        container ? container.disablePrev : this.disablePrev
      ),
      prevConfirmer: this.getValue(
-        container ? container.prevConfirmer : this.prevConfirmer,
+        container ? container.prevConfirmer : this.prevConfirmer
      ),
      prevPosition: this.getValue(
-        container ? container.prevPosition : this.prevPosition,
+        container ? container.prevPosition : this.prevPosition
      ),
      prevCssClass: this.getValue(
-        container ? container.prevCssClass : this.prevCssClass,
+        container ? container.prevCssClass : this.prevCssClass
      ),
      prevButton: this.getValue(
-        container ? container.prevButton : this.prevButton,
+        container ? container.prevButton : this.prevButton
      ),
      hasReset: this.getValue(container ? container.hasReset : this.hasReset),
      disableReset: this.getValue(
-        container ? container.disableReset : this.disableReset,
+        container ? container.disableReset : this.disableReset
      ),
      resetConfirmer: this.getValue(
-        container ? container.resetConfirmer : this.resetConfirmer,
+        container ? container.resetConfirmer : this.resetConfirmer
      ),
      resetPosition: this.getValue(
-        container ? container.resetPosition : this.resetPosition,
+        container ? container.resetPosition : this.resetPosition
      ),
      resetCssClass: this.getValue(
-        container ? container.resetCssClass : this.resetCssClass,
+        container ? container.resetCssClass : this.resetCssClass
      ),
      resetButton: this.getValue(
-        container ? container.resetButton : this.resetButton,
+        container ? container.resetButton : this.resetButton
      ),
    }).pipe(
      map((data) => {
@@ -872,7 +818,7 @@ export abstract class XNextPrevResetContainerComponent

          //
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -884,7 +830,8 @@ export abstract class XNextPrevResetContainerComponent
 type TXNextPrevResetAndHostContainer = IXNextPrevResetContainer &
  IXCardNextPrevResetHostContainer;
 export interface IXNextPrevResetAndHostContainer
-  extends IXBaseContainer, TXNextPrevResetAndHostContainer {}
+  extends IXBaseContainer,
+    TXNextPrevResetAndHostContainer {}

@Injectable({
  providedIn: 'root',
@@ -993,16 +940,6 @@ export class XNextPrevResetAndHostContainer
    this.cardNextPrevResetPropertyProvider.cardSubTitle;
  readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.cardNextPrevResetPropertyProvider.cardCssClass;
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardNextPrevResetPropertyProvider.cardShowFullScreenButton;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardNextPrevResetPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardNextPrevResetPropertyProvider.cardEnterFullScreenButtonColor;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardNextPrevResetPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardNextPrevResetPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion
  //#endregion

@@ -1010,7 +947,7 @@ export class XNextPrevResetAndHostContainer
  //#region Constructor ...
  constructor(
    protected nextPrevResetPropertyProvider: XNextPrevResetContainer,
-    protected cardNextPrevResetPropertyProvider: XCardNextPrevResetHostContainer,
+    protected cardNextPrevResetPropertyProvider: XCardNextPrevResetHostContainer
  ) {
    super();
  }
@@ -1064,26 +1001,6 @@ export class XNextPrevResetAndHostContainerComponent
  @Input()
  cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.cardCssClass;
-
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -1206,7 +1123,7 @@ export class XNextPrevResetAndHostContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XNextPrevResetAndHostContainer,
+    protected propertyProvider: XNextPrevResetAndHostContainer
  ) {
    super(
      config,
@@ -1215,7 +1132,7 @@ export class XNextPrevResetAndHostContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -1223,60 +1140,35 @@ export class XNextPrevResetAndHostContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXNextPrevResetAndHostContainer,
+    container?: IXNextPrevResetAndHostContainer
  ): Observable<IXNextPrevResetAndHostContainer> {
    return forkJoin({
      //
      //#region XComponentCard ...
      cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass,
+        container ? container.cardCssClass : this.cardCssClass
      ),
      isInPage: this.getValue(container ? container.isInPage : this.isInPage),
      wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard,
+        container ? container.wrapWithCard : this.wrapWithCard
      ),
      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
      ),
      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,
-      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
+        container ? container.cardSubTitle : this.cardSubTitle
      ),
      //#endregion

@@ -1293,51 +1185,51 @@ export class XNextPrevResetAndHostContainerComponent
      //
      hasNext: this.getValue(container ? container.hasNext : this.hasNext),
      disableNext: this.getValue(
-        container ? container.disableNext : this.disableNext,
+        container ? container.disableNext : this.disableNext
      ),
      nextConfirmer: this.getValue(
-        container ? container.nextConfirmer : this.nextConfirmer,
+        container ? container.nextConfirmer : this.nextConfirmer
      ),
      nextPosition: this.getValue(
-        container ? container.nextPosition : this.nextPosition,
+        container ? container.nextPosition : this.nextPosition
      ),
      nextCssClass: this.getValue(
-        container ? container.nextCssClass : this.nextCssClass,
+        container ? container.nextCssClass : this.nextCssClass
      ),
      nextButton: this.getValue(
-        container ? container.nextButton : this.nextButton,
+        container ? container.nextButton : this.nextButton
      ),
      hasPrev: this.getValue(container ? container.hasPrev : this.hasPrev),
      disablePrev: this.getValue(
-        container ? container.disablePrev : this.disablePrev,
+        container ? container.disablePrev : this.disablePrev
      ),
      prevConfirmer: this.getValue(
-        container ? container.prevConfirmer : this.prevConfirmer,
+        container ? container.prevConfirmer : this.prevConfirmer
      ),
      prevPosition: this.getValue(
-        container ? container.prevPosition : this.prevPosition,
+        container ? container.prevPosition : this.prevPosition
      ),
      prevCssClass: this.getValue(
-        container ? container.prevCssClass : this.prevCssClass,
+        container ? container.prevCssClass : this.prevCssClass
      ),
      prevButton: this.getValue(
-        container ? container.prevButton : this.prevButton,
+        container ? container.prevButton : this.prevButton
      ),
      hasReset: this.getValue(container ? container.hasReset : this.hasReset),
      disableReset: this.getValue(
-        container ? container.disableReset : this.disableReset,
+        container ? container.disableReset : this.disableReset
      ),
      resetConfirmer: this.getValue(
-        container ? container.resetConfirmer : this.resetConfirmer,
+        container ? container.resetConfirmer : this.resetConfirmer
      ),
      resetPosition: this.getValue(
-        container ? container.resetPosition : this.resetPosition,
+        container ? container.resetPosition : this.resetPosition
      ),
      resetCssClass: this.getValue(
-        container ? container.resetCssClass : this.resetCssClass,
+        container ? container.resetCssClass : this.resetCssClass
      ),
      resetButton: this.getValue(
-        container ? container.resetButton : this.resetButton,
+        container ? container.resetButton : this.resetButton
      ),
      //#endregion
    }).pipe(
@@ -1356,7 +1248,7 @@ export class XNextPrevResetAndHostContainerComponent
          onPrev: this.onPrev,
          onReset: this.onReset,
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -0,0 +1,4 @@
+export interface XSizeModel {
+    width?: number;
+    height?: number;
+}
@@ -43,11 +43,6 @@ export class XCardTestComponent extends XCardContainerComponent {}
          [showFooter]="props.cardShowFooter"
          [actionProvider]="props.cardActionProvider"
          [foregroundColor]="props.cardForegroundColor"
-          [showFullScreenButton]="props.showFullScreenButton"
-          [exitFullScreenButtonIcon]="props.exitFullScreenButtonIcon"
-          [enterFullScreenButtonIcon]="props.enterFullScreenButtonIcon"
-          [exitFullScreenButtonColor]="props.exitFullScreenButtonColor"
-          [enterFullScreenButtonColor]="props.enterFullScreenButtonColor"
        >
        </x-card>
      </ng-container>
@@ -60,21 +55,16 @@ export class XCardTestComponent extends XCardContainerComponent {}
          class="x-card"
          [showActions]="true"
          [color]="props.cardColor"
-          [isInPage]="props.isInPage"
          [ngClass]="props.cardCssClass"
+          [isInPage]="props.isInPage"
          [showHeader]="
            (notEmptyValue(props.cardTitle) | async) ||
            (notEmptyValue(props.cardSubTitle) | async)
          "
+          [subTitle]="getResourceValue(props.cardSubTitle)"
          [title]="getResourceValue(props.cardTitle) | async"
          [showFooter]="getValue(props.cardShowFooter) | async"
-          [subTitle]="getResourceValue(props.cardSubTitle) | async"
          [foregroundColor]="getValue(props.cardForegroundColor) | async"
-          [showFullScreenButton]="getValue(props.cardShowFullScreenButton) | async"
-          [exitFullScreenButtonIcon]="getValue(props.cardExitFullScreenButtonIcon) | async"
-          [enterFullScreenButtonIcon]="getValue(props.cardEnterFullScreenButtonIcon) | async"
-          [exitFullScreenButtonColor]="getValue(props.cardExitFullScreenButtonColor) | async"
-          [enterFullScreenButtonColor]="getValue(props.cardEnterFullScreenButtonColor) | async"
        >
          <!-- Content -->
          <ng-container *ngTemplateOutlet="componentsRef"></ng-container>
@@ -6,10 +6,10 @@
  [class.no-text]="isNoTextCard() | async"
  [class.page-card]="getValue(isInPage) | async"
  [isForeground]="getValue(foregroundColor) | async"
-  [class.full-screen]="getValue(isFullScreen) | 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"
@@ -52,21 +52,12 @@

    <!-- Header Content -->
    <ng-content select="[header]"></ng-content>
-
-    <!-- Fullscreen Toggle Button -->
-    <x-icon
-      class="x-fullscreen-toggle"
-      (clicked)="handleToggleFullScreen()"
-      [name]="getFullScreenIconName() | async"
-      [color]="getFullScreenIconColor() | async"
-      [clickable]="!loading && !uiDisabled && !lock"
-      *ngIf="getValue(showFullScreenButton) | async"
-    ></x-icon>
  </mat-card-header>

  <!-- Card Image -->
  <img
    mat-card-image
+    #cardImage
    class="x-image"
    [src]="getValue(imageUrl) | async"
    *ngIf="notEmptyValue(imageUrl) | async"
@@ -74,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,6 +1,43 @@
 //
@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 {
  .mat-card-header-text {
@@ -16,7 +53,7 @@
  height: var(--height, inherit);
 }

-.x-card.page-card {
+.x-card.page-card:not(.fullscreen) {
  @include push-auto();
  @include applyWidthHeight();
  @include m-tb($d-l);
@@ -32,19 +69,6 @@
  }
 }

-.x-card.full-screen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 100vh;
-  border-radius: 0;
-  margin: 0;
-  z-index: var(--full-screen-z-index, 9999);
-}
-
 .x-header,
 .x-content,
 .x-actions,
@@ -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
@@ -22,21 +32,107 @@ export class XCardComponent extends XCardContainerComponent {
  private ACTION_PROVIDER_SUBSCRIPTION: Subscription;

  //
-  private IS_FULL_SCREEN: boolean = false;
-  set isFullScreen(v: boolean) {
-    //
-    const isChanged = v != this.IS_FULL_SCREEN;
+  //#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;

-    //
-    this.IS_FULL_SCREEN = v;
+  @ViewChild('cardImage', { static: false })
+  set cardImage(v: ElementRef<HTMLElement>) {
+    this.CARD_IMAGE = v;
  }
-  get isFullScreen() {
-    return this.IS_FULL_SCREEN;
+
+  @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);

@@ -57,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() {
@@ -89,79 +203,183 @@ export class XCardComponent extends XCardContainerComponent {
      ),
    );
  }
-
-  getFullScreenIconName() {
-    return this.getValue(this.isFullScreen).pipe(
-      concatMap((isFull) => {
-        //
-        if (!isFull) {
-          return this.getValue(this.enterFullScreenButtonIcon);
-        } else {
-          return this.getValue(this.exitFullScreenButtonIcon);
-        }
-      }),
-    );
-  }
-
-  getFullScreenIconColor() {
-    return this.getValue(this.isFullScreen).pipe(
-      concatMap((isFull) => {
-        //
-        if (!isFull) {
-          return this.getValue(this.enterFullScreenButtonColor);
-        } else {
-          return this.getValue(this.exitFullScreenButtonColor);
-        }
-      }),
-    );
-  }
-  //#endregion
-
-  //
-  //#region UI Handlers ...
-  async handleToggleFullScreen() {
-    await this.toggleFullScreen();
-  }
  //#endregion

  //
  //#region Actions ...
-  public async enterFullScreen() {
+  public async enterFullscreen(options?: FullscreenOptions) {
    //
-    if (this.isFullScreen) {
+    if (this.isFullscreen) {
      return;
    }

    //
-    this.isFullScreen = true;
-    // this.fullScreenChanged.emit(true);
-
-    //
-    this.detectChanges();
-  }
-
-  public async exitFullScreen() {
-    //
-    if (!this.isFullScreen) {
+    const element: HTMLElement = this.element?.nativeElement;
+    if (!element) {
      return;
    }

    //
-    this.isFullScreen = false;
-    // this.fullScreenChanged.emit(false);
+    try {
+      //
+      if (!this.canUseFullscreen()) {
+        return;
+      }

-    //
-    this.detectChanges();
+      //
+      await element.requestFullscreen(options);
+
+      //
+      this.isFullscreen = true;
+      this.detectChanges();
+    } catch {}
  }

-  public async toggleFullScreen() {
+  public async exitFullscreen() {
    //
-    if (this.isFullScreen) {
-      await this.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();
+      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

  //
@@ -196,17 +414,17 @@ export class XCardComponent extends XCardContainerComponent {

        //
        case XCardAction.EnterFullScreen:
-          await this.enterFullScreen();
+          await this.enterFullscreen();
          break;

        //
        case XCardAction.ExitFullScreen:
-          await this.exitFullScreen();
+          await this.exitFullscreen();
          break;

        //
        case XCardAction.ToggleFullScreen:
-          await this.toggleFullScreen();
+          await this.toggleFullscreen();
          break;
      }
    });
@@ -223,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
 }
@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { XCardComponent } from './x-card.component';
-import { XIconModule } from './../x-icon/x-icon.module';
 import { XBaseComponentModule } from '../modules/x-base-component.module';

@NgModule({
-  declarations: [XCardComponent],
-  imports: [CommonModule, XIconModule, XBaseComponentModule],
-  exports: [XIconModule, XBaseComponentModule, XCardComponent],
+  declarations: [
+    XCardComponent
+  ],
+  imports: [CommonModule, XBaseComponentModule],
+  exports: [XBaseComponentModule, XCardComponent],
 })
 export class XCardModule {}
@@ -29,15 +29,18 @@ 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 { XIconIdentifier, XIconNames } from '../x-icon/x-icon.typings';
 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;
@@ -62,13 +65,6 @@ export interface IXCardContainer extends IXBaseContainer {
  avatarUrl: XStandardType<string>;
  avatarTemplate: TemplateRef<any>;

-  //
-  showFullScreenButton: XStandardType<boolean>;
-  enterFullScreenButtonIcon: XStandardType<XIconIdentifier>;
-  enterFullScreenButtonColor: XStandardType<XColorIdentifier>;
-  exitFullScreenButtonIcon: XStandardType<XIconIdentifier>;
-  exitFullScreenButtonColor: XStandardType<XColorIdentifier>;
-
  //
  imageUrl: XStandardType<string>;
  imageDescription: XStandardType<XResourceIdentifier>;
@@ -107,17 +103,6 @@ export class XCardContainer
  readonly avatarUrl: XStandardType<string>;
  readonly avatarTemplate: TemplateRef<any>;

-  //
-  readonly showFullScreenButton: XStandardType<boolean> = false;
-  readonly enterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    XIconNames.fullscreen;
-  readonly enterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    XColorWithBrightness.Light;
-  readonly exitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    XIconNames.close_fullscreen;
-  readonly exitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    XColorWithBrightness.Light;
-
  //
  readonly imageUrl: XStandardType<string>;
  readonly imageDescription: XStandardType<XResourceIdentifier>;
@@ -174,27 +159,6 @@ export abstract class XCardContainerComponent
  @Input()
  avatarTemplate: TemplateRef<any> = this.propertyProvider.avatarTemplate;

-  //
-  @Input()
-  showFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.showFullScreenButton;
-
-  @Input()
-  enterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.enterFullScreenButtonIcon;
-
-  @Input()
-  enterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.enterFullScreenButtonColor;
-
-  @Input()
-  exitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.exitFullScreenButtonIcon;
-
-  @Input()
-  exitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.exitFullScreenButtonColor;
-
  //
  @Input()
  imageUrl: XStandardType<string> = this.propertyProvider.imageUrl;
@@ -273,31 +237,6 @@ export abstract class XCardContainerComponent
        container ? container.avatarTemplate : this.avatarTemplate,
      ),

-      //
-      showFullScreenButton: this.getValue(
-        container ? container.showFullScreenButton : this.showFullScreenButton,
-      ),
-      enterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.enterFullScreenButtonIcon
-          : this.enterFullScreenButtonIcon,
-      ),
-      enterFullScreenButtonColor: this.getValue(
-        container
-          ? container.enterFullScreenButtonColor
-          : this.enterFullScreenButtonColor,
-      ),
-      exitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.exitFullScreenButtonIcon
-          : this.exitFullScreenButtonIcon,
-      ),
-      exitFullScreenButtonColor: this.getValue(
-        container
-          ? container.exitFullScreenButtonColor
-          : this.exitFullScreenButtonColor,
-      ),
-
      //
      imageUrl: this.getValue(container ? container.imageUrl : this.imageUrl),
      imageDescription: this.getValue(
@@ -348,11 +287,6 @@ type TXComponentCardContainer = {
    | 'subTitle'
    | 'showFooter'
    | 'showActions'
-    | 'showFullScreenButton'
-    | 'enterFullScreenButtonIcon'
-    | 'enterFullScreenButtonColor'
-    | 'exitFullScreenButtonIcon'
-    | 'exitFullScreenButtonColor'
  > as `card${Capitalize<string & TKey>}`]: IXCardContainer[TKey];
 };

@@ -398,18 +332,6 @@ export class XComponentCardContainer
    this.propertyProvider.showFooter;
  readonly cardShowActions: XStandardType<boolean> =
    this.propertyProvider.showActions;
-
-  //
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.showFullScreenButton;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.enterFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.enterFullScreenButtonColor;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.exitFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.exitFullScreenButtonColor;
  //#endregion

  //
@@ -470,27 +392,6 @@ export abstract class XComponentCardContainerComponent
  @Input()
  cardShowActions: XStandardType<boolean> =
    this.propertyProvider.cardShowActions;
-
-  //
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -550,31 +451,6 @@ export abstract class XComponentCardContainerComponent
      cardShowActions: this.getValue(
        container ? container.cardShowActions : this.cardShowActions,
      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
-      ),
    }).pipe(
      map((data) => {
        return {
@@ -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"
@@ -14,18 +16,7 @@
    [title]="getResourceValue(cardTitle) | async"
    [showFooter]="getValue(cardShowFooter) | async"
    [showActions]="getValue(cardShowActions) | async"
-    [enterFullScreenButtonIcon]="
-      getValue(cardEnterFullScreenButtonIcon) | async
-    "
-    [enterFullScreenButtonColor]="
-      getValue(cardEnterFullScreenButtonColor) | async
-    "
-    [exitFullScreenButtonColor]="
-      getValue(cardExitFullScreenButtonColor) | async
-    "
    [foregroundColor]="getValue(cardForegroundColor) | async"
-    [showFullScreenButton]="getValue(cardShowFullScreenButton) | async"
-    [exitFullScreenButtonIcon]="getValue(cardExitFullScreenButtonIcon) | async"
  >
    <!-- Content -->
    <ng-container *ngTemplateOutlet="componentsRef"></ng-container>
@@ -52,6 +43,7 @@
  >
    <!-- Toolbar -->
    <x-action-bar
+      #chartActionBar
      [color]="actionBarColor"
      [cssClass]="actionBarCssClass"
      [actionProvider]="actionBarActionProvider"
@@ -2,7 +2,6 @@ import {
  Component,
  ViewChild,
  ElementRef,
-  HostListener,
  ChangeDetectionStrategy,
 } from '@angular/core';
 import {
@@ -14,24 +13,25 @@ import {
  downloadFileByUrl,
  isNullOrUndefined,
  isNullOrEmptyString,
-  downloadArrayBufferedFile,
  XColorWithBrightness,
+  downloadArrayBufferedFile,
 } from 'x-framework-core';
 import {
  isChartType,
  XChartAction,
  XChartOptions,
-  XChartSeriesType,
  XChartEventOpts,
+  XChartTextAlign,
+  XChartSeriesType,
+  isChartTextAlign,
  XChartActionBarItem,
  XChartDrilldownEvent,
  XChartContainerComponent,
  XChartStoryboardBeatInfo,
-  isChartTextAlign,
-  XChartTextAlign,
+  XChartColorFormatterOpts,
 } from './x-chart.typings';
-import { Subscription } from 'rxjs';
 import ApexCharts from 'apexcharts';
+import { Subject, Subscription } from 'rxjs';
 import {
  XActionBarItem,
  XActionBarItemSlot,
@@ -39,6 +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 { XCardComponent } from '../x-card/x-card.component';
+import { XActionBarComponent } from '../x-action-bar/x-action-bar.component';

@Component({
  selector: 'x-chart',
@@ -50,39 +52,70 @@ export class XChartComponent extends XChartContainerComponent {
  //
  //#region Props ...
  //
-  private CHART_CONTAINER: ElementRef | undefined;
+  //#region Chart Container ...
+  //
+  private CHART_CONTAINER: ElementRef = undefined;

  @ViewChild('chartContainer', { static: false })
-  set chartContainer(el: ElementRef | undefined) {
+  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

  //
-  @HostListener('resize', ['$event'])
-  onResize(event: any) {
+  //#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(v: XCardComponent) {
    //
-    if (isNullOrUndefined(this.chartInstance)) {
-      return;
+    if (!isNullOrUndefined(v)) {
+      this.registerCardActionProvider();
+    } else {
+      this.unregisterCardActionProvider();
    }

    //
-    // TODO: Complete this ...
-    // this.chartInstance.updateOptions();
+    this.CHART_CARD = v;
  }

+  get chartCard() {
+    return this.CHART_CARD;
+  }
+  //#endregion
+
+  //
+  private ORIGINAL_HEIGHT: string = undefined;
+
  //
  private CHART_OPTIONS: XChartOptions = null;

@@ -91,6 +124,7 @@ export class XChartComponent extends XChartContainerComponent {

  //
  private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
+  private CARD_ACTION_PROVIDER_SUBSCRIPTION: Subscription;

  //
  readonly IconNames = Object.assign({}, XIconNames);
@@ -340,6 +374,7 @@ export class XChartComponent extends XChartContainerComponent {
    //
    this.destroyComponent();
    this.unregisterActionProvider();
+    this.unregisterCardActionProvider();
  }
  //#endregion

@@ -663,52 +698,17 @@ export class XChartComponent extends XChartContainerComponent {

  async handleToggleFullscreen() {
    //
+    if (
+      isNullOrUndefined(this.chartInstance) ||
+      isNullOrUndefined(this.chartContainer) ||
+      isNullOrUndefined(this.chartContainer.nativeElement)
+    ) {
+      return;
+    }
+
+    //
+    // Handle Fullscreen Toggle using Card ...
    this.cardActionProvider.next({ action: XCardAction.ToggleFullScreen });
-
-    // if (
-    //   isNullOrUndefined(this.chartInstance) ||
-    //   isNullOrUndefined(this.chartContainer) ||
-    //   isNullOrUndefined(this.chartContainer.nativeElement)
-    // ) {
-    //   return;
-    // }
-
-    // //
-    // const chartWrapper = this.chartContainer.nativeElement;
-    // const doc = document as any;
-
-    // //
-    // // Check if the chart wrapper is currently in fullscreen mode
-    // const isFullscreen =
-    //   doc.fullscreenElement === chartWrapper ||
-    //   doc.msFullscreenElement === chartWrapper ||
-    //   doc.mozFullScreenElement === chartWrapper ||
-    //   doc.webkitFullscreenElement === chartWrapper;
-    // if (!isFullscreen) {
-    //   //
-    //   // Enter Fullscreen
-    //   if (chartWrapper.requestFullscreen) {
-    //     await chartWrapper.requestFullscreen();
-    //   } else if (chartWrapper.webkitRequestFullscreen) {
-    //     await chartWrapper.webkitRequestFullscreen();
-    //   } else if (chartWrapper.mozRequestFullScreen) {
-    //     await chartWrapper.mozRequestFullScreen();
-    //   } else if (chartWrapper.msRequestFullscreen) {
-    //     await chartWrapper.msRequestFullscreen();
-    //   }
-    // } else {
-    //   //
-    //   // Exit Fullscreen
-    //   if (doc.exitFullscreen) {
-    //     await doc.exitFullscreen();
-    //   } else if (doc.webkitExitFullscreen) {
-    //     await doc.webkitExitFullscreen();
-    //   } else if (doc.mozCancelFullScreen) {
-    //     await doc.mozCancelFullScreen();
-    //   } else if (doc.msExitFullscreen) {
-    //     await doc.msExitFullscreen();
-    //   }
-    // }
  }
  //#endregion

@@ -725,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);
@@ -760,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') {
@@ -799,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,
@@ -829,7 +838,7 @@ export class XChartComponent extends XChartContainerComponent {
          autoSelected: 'pan',
        },
        events: {
-          ...cOptions.chart?.events,
+          ...cOptions?.chart?.events,
          //
          //#region Attach Events ...
          //
@@ -840,7 +849,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.animationEnd?.(chart, options);
+            cOptions?.chart?.events?.animationEnd?.(chart, options);
          },

          //
@@ -851,7 +860,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.beforeMount?.(chart, options);
+            cOptions?.chart?.events?.beforeMount?.(chart, options);
          },

          //
@@ -862,7 +871,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.mounted?.(chart, options);
+            cOptions?.chart?.events?.mounted?.(chart, options);
          },

          //
@@ -873,7 +882,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.updated?.(chart, options);
+            cOptions?.chart?.events?.updated?.(chart, options);
          },

          //
@@ -888,7 +897,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.mouseMove?.(e, chart, options);
+            cOptions?.chart?.events?.mouseMove?.(e, chart, options);
          },

          //
@@ -903,7 +912,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.mouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.mouseLeave?.(e, chart, options);
          },

          //
@@ -918,7 +927,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.click?.(e, chart, options);
+            cOptions?.chart?.events?.click?.(e, chart, options);
          },

          //
@@ -933,7 +942,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.xAxisLabelClick?.(e, chart, options);
+            cOptions?.chart?.events?.xAxisLabelClick?.(e, chart, options);
          },

          //
@@ -951,7 +960,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.legendClick?.(chart, seriesIndex, options);
+            cOptions?.chart?.events?.legendClick?.(chart, seriesIndex, options);
          },

          //
@@ -966,7 +975,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.markerClick?.(e, chart, options);
+            cOptions?.chart?.events?.markerClick?.(e, chart, options);
          },

          //
@@ -983,7 +992,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.selection?.(chart, options);
+            cOptions?.chart?.events?.selection?.(chart, options);
          },

          //
@@ -998,7 +1007,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.dataPointSelection?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointSelection?.(e, chart, options);
          },

          //
@@ -1013,7 +1022,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.dataPointMouseEnter?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseEnter?.(e, chart, options);
          },

          //
@@ -1028,7 +1037,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.dataPointMouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseLeave?.(e, chart, options);
          },

          //
@@ -1042,7 +1051,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.beforeZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeZoom?.(chart, options);
          },

          //
@@ -1053,7 +1062,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.beforeResetZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeResetZoom?.(chart, options);
          },

          //
@@ -1070,7 +1079,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.zoomed?.(chart, options);
+            cOptions?.chart?.events?.zoomed?.(chart, options);
          },

          //
@@ -1084,7 +1093,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.scrolled?.(chart, options);
+            cOptions?.chart?.events?.scrolled?.(chart, options);
          },

          //
@@ -1101,7 +1110,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.brushScrolled?.(chart, options);
+            cOptions?.chart?.events?.brushScrolled?.(chart, options);
          },

          //
@@ -1118,7 +1127,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.crossFilter?.(chart, options);
+            cOptions?.chart?.events?.crossFilter?.(chart, options);
          },

          //
@@ -1138,7 +1147,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.filterChange?.(chart, options);
+            cOptions?.chart?.events?.filterChange?.(chart, options);
          },

          //
@@ -1160,7 +1169,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.annotationDragged?.(chart, options);
+            cOptions?.chart?.events?.annotationDragged?.(chart, options);
          },

          //
@@ -1179,7 +1188,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.annotationEdited?.(chart, options);
+            cOptions?.chart?.events?.annotationEdited?.(chart, options);
          },

          //
@@ -1199,7 +1208,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.annotationCreated?.(chart, options);
+            cOptions?.chart?.events?.annotationCreated?.(chart, options);
          },

          //
@@ -1219,7 +1228,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.annotationStyled?.(chart, options);
+            cOptions?.chart?.events?.annotationStyled?.(chart, options);
          },

          //
@@ -1237,7 +1246,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.annotationDeleted?.(chart, options);
+            cOptions?.chart?.events?.annotationDeleted?.(chart, options);
          },

          //
@@ -1258,7 +1267,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.measured?.(chart, options);
+            cOptions?.chart?.events?.measured?.(chart, options);
          },

          //
@@ -1272,7 +1281,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.beatChange?.(chart, options);
+            cOptions?.chart?.events?.beatChange?.(chart, options);
          },

          //
@@ -1287,7 +1296,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.keyDown?.(e, chart, options);
+            cOptions?.chart?.events?.keyDown?.(e, chart, options);
          },

          //
@@ -1302,7 +1311,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.keyUp?.(e, chart, options);
+            cOptions?.chart?.events?.keyUp?.(e, chart, options);
          },

          //
@@ -1317,7 +1326,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.drillDownStart?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownStart?.(info, chart, options);
          },

          //
@@ -1332,7 +1341,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.drillDownEnd?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownEnd?.(info, chart, options);
          },

          //
@@ -1347,7 +1356,7 @@ export class XChartComponent extends XChartContainerComponent {
            }

            //
-            cOptions.chart?.events?.drillUp?.(info, chart, options);
+            cOptions?.chart?.events?.drillUp?.(info, chart, options);
          },

          //
@@ -1362,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,
-        palette: cOptions.theme?.palette || 'palette1',
+        ...cOptions?.theme,
+        palette: cOptions?.theme?.palette || 'palette1',
      },
-      colors: cOptions.colors || [primaryColorValue],
+      colors: colors,
      grid: {
-        ...cOptions.grid,
+        ...cOptions?.grid,
        borderColor: gridColorValue,
      },
      dataLabels: {
-        ...cOptions.dataLabels,
+        ...cOptions?.dataLabels,
      },
    };

@@ -1387,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();
  }
@@ -2071,6 +2089,60 @@ export class XChartComponent extends XChartContainerComponent {
    this.chartInstance = null;
  }

+  private async handleFullscreenMode(isFullscreen: boolean) {
+    //
+    if (
+      isNullOrUndefined(this.chartCard) ||
+      isNullOrUndefined(this.chartInstance)
+    ) {
+      return;
+    }
+
+    //
+    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;
+
+      //
+      const offset = 24;
+      height = `${
+        window.innerHeight -
+        offset -
+        (actionBarHeight +
+          (cardImageElement?.clientHeight || 0) +
+          (cardHeaderElement?.clientHeight || 0) +
+          (cardActionsElement?.clientHeight || 0) +
+          (cardFooterElement?.clientHeight || 0))
+      }px`;
+    }
+
+    //
+    this.CHART_OPTIONS = {
+      ...this.CHART_OPTIONS,
+      chart: {
+        height: height,
+      },
+    };
+
+    //
+    this.chartInstance.updateOptions(
+      this.CHART_OPTIONS,
+      false,
+      true,
+      false,
+      false,
+    );
+    this.managerService.dispatchResizeEvent();
+  }
+
  private registerActionProvider() {
    //
    this.unregisterActionProvider();
@@ -2141,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
 }
@@ -17,6 +17,7 @@ import {
  XColorIdentifier,
  XResourceIdentifier,
  XColorWithBrightness,
+  getXColorValue,
 } from 'x-framework-core';
 import {
  XCardActionModel,
@@ -42,7 +43,6 @@ import { XBaseActionModel } from '../classes/x-base-action.model';
 import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
 import { XPopoverPresentOptions } from '../dialogs/x-popover/x-popover.typings';
 import { XFrameworkComponentsConfig } from '../config/x-framework-components.config';
-import { XIconIdentifier } from '../x-icon/x-icon.typings';

 //
 //#region Chart ...
@@ -2694,19 +2694,19 @@ export type XChart = {
    ): void;
    /** Fired before a drill-down transition begins. Requires the Drilldown feature. */
    drillDownStart?(
-      info: XChartDrilldownEvent,
+      info: ApexCharts.ApexDrilldownEvent,
      chart?: ApexCharts,
      options?: XChartEventOpts,
    ): void;
    /** Fired after a drill-down transition completes. Requires the Drilldown feature. */
    drillDownEnd?(
-      info: XChartDrilldownEvent,
+      info: ApexCharts.ApexDrilldownEvent,
      chart?: ApexCharts,
      options?: XChartEventOpts,
    ): void;
    /** Fired after navigating back up a drilldown level. Requires the Drilldown feature. */
    drillUp?(
-      info: XChartDrilldownEvent,
+      info: ApexCharts.ApexDrilldownEvent,
      chart?: ApexCharts,
      options?: XChartEventOpts,
    ): void;
@@ -3263,7 +3263,7 @@ export enum XChartActionBarItem {

 export type XChartActionBarItemIdentifier = XChartActionBarItem | string;

-export function isChartActionBar(value: XChartActionBarItemIdentifier) {
+export function isChartActionBar(value: string) {
  return isValueInEnum(value, Object.assign({}, XChartActionBarItem));
 }

@@ -3324,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>;
@@ -3464,8 +3467,8 @@ export class XChartContainer
  implements Readonly<IXChartContainer>
 {
  //
-  readonly cssClass: XStandardType<XOneOrManyType<string>>;
  readonly actionProvider = new Subject<XChartActionModel>();
+  readonly cssClass: XStandardType<XOneOrManyType<string>>;

  //
  // Chart Props ...
@@ -3474,11 +3477,17 @@ 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> =
    XChartTextAlign.Center;

+  //
  readonly subTitle: XStandardType<XResourceIdentifier>;
  readonly subTitleAlign: XStandardType<XChartTextAlignIdentifier> =
    XChartTextAlign.Center;
@@ -3654,16 +3663,6 @@ export class XChartContainer
    this.cardPropertyProvider.cardShowFooter;
  readonly cardShowActions: XStandardType<boolean> =
    this.cardPropertyProvider.cardShowActions;
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardPropertyProvider.cardShowFullScreenButton;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonColor;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
  //#endregion

  //
@@ -3708,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;
@@ -3969,26 +3971,6 @@ export abstract class XChartContainerComponent
  @Input()
  cardActionProvider: Subject<XCardActionModel> =
    this.propertyProvider.cardActionProvider;
-
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
  //#endregion

  //
@@ -4044,7 +4026,7 @@ export abstract class XChartContainerComponent
      changeDetector,
    );
  }
-  //#endregion
+  //#endregionّ

  //
  //#region Abstract ...
@@ -4060,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(
@@ -4133,31 +4118,6 @@ export abstract class XChartContainerComponent
      cardSubTitle: this.getValue(
        container ? container.cardSubTitle : this.cardSubTitle,
      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
      //#endregion

      //
@@ -45,7 +45,8 @@ export enum XFileDropAreaAction {

 export type XFileDropAreaActionIdentifier = XFileDropAreaAction | string;

-export interface XFileDropAreaActionModel extends XBaseActionModel<XFileDropAreaActionIdentifier> {}
+export interface XFileDropAreaActionModel
+  extends XBaseActionModel<XFileDropAreaActionIdentifier> {}

 export enum XFileDropAreaCssVars {
  LabelColor = 'label-color',
@@ -210,7 +211,7 @@ export abstract class XFileDropAreaContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XFileDropAreaContainer,
+    protected propertyProvider: XFileDropAreaContainer
  ) {
    super(
      config,
@@ -220,7 +221,7 @@ export abstract class XFileDropAreaContainerComponent
      ruler,
      zone,
      changeDetector,
-      propertyProvider,
+      propertyProvider
    );
  }
  //#endregion
@@ -228,7 +229,7 @@ export abstract class XFileDropAreaContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXFileDropAreaContainer,
+    container?: IXFileDropAreaContainer
  ): Observable<IXFileDropAreaContainer> {
    return super
      .extractProps(container ? container : this)
@@ -237,40 +238,40 @@ export abstract class XFileDropAreaContainerComponent
          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
            ),
            icon: this.getValue(container ? container.icon : this.icon),
            message: this.getValue(
-              container ? container.message : this.message,
+              container ? container.message : this.message
            ),
            disableFileCheck: this.getValue(
-              container ? container.disableFileCheck : this.disableFileCheck,
+              container ? container.disableFileCheck : this.disableFileCheck
            ),
            supportsMultipleFiles: this.getValue(
              container
                ? container.supportsMultipleFiles
-                : this.supportsMultipleFiles,
+                : this.supportsMultipleFiles
            ),
            allowedExtensions: this.getValue(
-              container ? container.allowedExtensions : this.allowedExtensions,
+              container ? container.allowedExtensions : this.allowedExtensions
            ),
            dragDisabled: this.getValue(
-              container ? container.dragDisabled : this.dragDisabled,
+              container ? container.dragDisabled : this.dragDisabled
            ),
            successColor: this.getValue(
-              container ? container.successColor : this.successColor,
+              container ? container.successColor : this.successColor
            ),
            errorColor: this.getValue(
-              container ? container.errorColor : this.errorColor,
+              container ? container.errorColor : this.errorColor
            ),
            accentColor: this.getValue(
-              container ? container.accentColor : this.accentColor,
+              container ? container.accentColor : this.accentColor
            ),
          }).pipe(
            map((data) => {
@@ -278,9 +279,9 @@ export abstract class XFileDropAreaContainerComponent
                superData,
                data,
              };
-            }),
+            })
          );
-        }),
+        })
      )
      .pipe(
        map((info) => {
@@ -304,7 +305,7 @@ export abstract class XFileDropAreaContainerComponent
            //
            filesChangeEmiter: this.filesChangeEmiter,
          };
-        }),
+        })
      );
  }
  //#endregion
@@ -320,7 +321,8 @@ type TXComponentFileDropAreaContainer = {
 };

 export interface IXComponentFileDropAreaContainer
-  extends TXComponentFileDropAreaContainer, IXBaseComponentContainer {
+  extends TXComponentFileDropAreaContainer,
+    IXBaseComponentContainer {
  showFileDropArea: XStandardType<boolean>;
 }

@@ -403,16 +405,6 @@ export class XComponentFileDropAreaContainer
    new Subject<XCardActionModel>();
  readonly fileDropAreaCardSubTitle: XStandardType<XResourceIdentifier>;
  readonly fileDropAreaCardCssClass: XStandardType<XOneOrManyType<string>>;
-  readonly fileDropAreaCardShowFullScreenButton: XStandardType<boolean> = false;
-  readonly fileDropAreaCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    XIconNames.fullscreen;
-  readonly fileDropAreaCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    XColorWithBrightness.Light;
-  readonly fileDropAreaCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    XIconNames.close_fullscreen;
-  readonly fileDropAreaCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    XColorWithBrightness.Light;
-
  //#endregion
  //#endregion

@@ -429,7 +421,7 @@ export class XComponentFileDropAreaContainer
 })
@Component({
  template: `
-    <!--
+    <!-- 
        <ng-container *ngIf="extractProps() | async as props">
          <ng-container *ngIf="props.showFileDropArea">
            <x-file-drop-area
@@ -460,7 +452,7 @@ export class XComponentFileDropAreaContainer
              [supportsMultipleFiles]="props.fileDropAreaSupportsMultipleFiles"
            ></x-file-drop-area>
          </ng-container>
-        </ng-container>
+        </ng-container> 
    -->
  `,
 })
@@ -583,26 +575,6 @@ export abstract class XComponentFileDropAreaContainerComponent
  @Input()
  fileDropAreaCardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.fileDropAreaCardCssClass;
-
-  @Input()
-  fileDropAreaCardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.fileDropAreaCardShowFullScreenButton;
-
-  @Input()
-  fileDropAreaCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.fileDropAreaCardEnterFullScreenButtonIcon;
-
-  @Input()
-  fileDropAreaCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.fileDropAreaCardEnterFullScreenButtonColor;
-
-  @Input()
-  fileDropAreaCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.fileDropAreaCardExitFullScreenButtonIcon;
-
-  @Input()
-  fileDropAreaCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.fileDropAreaCardExitFullScreenButtonColor;
  //#endregion
  //#endregion

@@ -617,7 +589,7 @@ export abstract class XComponentFileDropAreaContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentFileDropAreaContainer,
+    protected propertyProvider: XComponentFileDropAreaContainer
  ) {
    super(
      config,
@@ -626,7 +598,7 @@ export abstract class XComponentFileDropAreaContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -634,137 +606,108 @@ export abstract class XComponentFileDropAreaContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXComponentFileDropAreaContainer,
+    container?: IXComponentFileDropAreaContainer
  ): Observable<IXComponentFileDropAreaContainer> {
    return forkJoin({
      //
      fileDropAreaCssClass: this.getValue(
-        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass,
+        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass
      ),
      fileDropAreaColor: this.getValue(
-        container ? container.fileDropAreaColor : this.fileDropAreaColor,
+        container ? container.fileDropAreaColor : this.fileDropAreaColor
      ),
      fileDropAreaForegroundColor: this.getValue(
        container
          ? container.fileDropAreaForegroundColor
-          : this.fileDropAreaForegroundColor,
+          : this.fileDropAreaForegroundColor
      ),
      fileDropAreaIcon: this.getValue(
-        container ? container.fileDropAreaIcon : this.fileDropAreaIcon,
+        container ? container.fileDropAreaIcon : this.fileDropAreaIcon
      ),
      fileDropAreaMessage: this.getValue(
-        container ? container.fileDropAreaMessage : this.fileDropAreaMessage,
+        container ? container.fileDropAreaMessage : this.fileDropAreaMessage
      ),
      fileDropAreaDisableFileCheck: this.getValue(
        container
          ? container.fileDropAreaDisableFileCheck
-          : this.fileDropAreaDisableFileCheck,
+          : this.fileDropAreaDisableFileCheck
      ),
      fileDropAreaSupportsMultipleFiles: this.getValue(
        container
          ? container.fileDropAreaSupportsMultipleFiles
-          : this.fileDropAreaSupportsMultipleFiles,
+          : this.fileDropAreaSupportsMultipleFiles
      ),
      fileDropAreaAllowedExtensions: this.getValue(
        container
          ? container.fileDropAreaAllowedExtensions
-          : this.fileDropAreaAllowedExtensions,
+          : this.fileDropAreaAllowedExtensions
      ),
      fileDropAreaDragDisabled: this.getValue(
        container
          ? container.fileDropAreaDragDisabled
-          : this.fileDropAreaDragDisabled,
+          : this.fileDropAreaDragDisabled
      ),
      fileDropAreaContentTemplate: this.getValue(
        container
          ? container.fileDropAreaContentTemplate
-          : this.fileDropAreaContentTemplate,
+          : this.fileDropAreaContentTemplate
      ),
      fileDropAreaSuccessColor: this.getValue(
        container
          ? container.fileDropAreaSuccessColor
-          : this.fileDropAreaSuccessColor,
+          : this.fileDropAreaSuccessColor
      ),
      fileDropAreaErrorColor: this.getValue(
        container
          ? container.fileDropAreaErrorColor
-          : this.fileDropAreaErrorColor,
+          : this.fileDropAreaErrorColor
      ),
      fileDropAreaAccentColor: this.getValue(
        container
          ? container.fileDropAreaAccentColor
-          : this.fileDropAreaAccentColor,
+          : this.fileDropAreaAccentColor
      ),
      showFileDropArea: this.getValue(
-        container ? container.showFileDropArea : this.showFileDropArea,
+        container ? container.showFileDropArea : this.showFileDropArea
      ),
      fileDropAreaIsInPage: this.getValue(
-        container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage,
+        container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage
      ),
      fileDropAreaWrapWithCard: this.getValue(
        container
          ? container.fileDropAreaWrapWithCard
-          : this.fileDropAreaWrapWithCard,
+          : this.fileDropAreaWrapWithCard
      ),
      fileDropAreaCardShowFooter: this.getValue(
        container
          ? container.fileDropAreaCardShowFooter
-          : this.fileDropAreaCardShowFooter,
+          : this.fileDropAreaCardShowFooter
      ),
      fileDropAreaCardShowActions: this.getValue(
        container
          ? container.fileDropAreaCardShowActions
-          : this.fileDropAreaCardShowActions,
+          : this.fileDropAreaCardShowActions
      ),
      fileDropAreaCardColor: this.getValue(
-        container
-          ? container.fileDropAreaCardColor
-          : this.fileDropAreaCardColor,
+        container ? container.fileDropAreaCardColor : this.fileDropAreaCardColor
      ),
      fileDropAreaCardForegroundColor: this.getValue(
        container
          ? container.fileDropAreaCardForegroundColor
-          : this.fileDropAreaCardForegroundColor,
+          : this.fileDropAreaCardForegroundColor
      ),
      fileDropAreaCardTitle: this.getValue(
-        container
-          ? container.fileDropAreaCardTitle
-          : this.fileDropAreaCardTitle,
+        container ? container.fileDropAreaCardTitle : this.fileDropAreaCardTitle
      ),
      fileDropAreaCardSubTitle: this.getValue(
        container
          ? container.fileDropAreaCardSubTitle
-          : this.fileDropAreaCardSubTitle,
+          : this.fileDropAreaCardSubTitle
      ),
      fileDropAreaCardCssClass: this.getValue(
        container
          ? container.fileDropAreaCardCssClass
-          : this.fileDropAreaCardCssClass,
-      ),
-      fileDropAreaCardShowFullScreenButton: this.getValue(
-        container
-          ? container.fileDropAreaCardShowFullScreenButton
-          : this.fileDropAreaCardShowFullScreenButton,
-      ),
-      fileDropAreaCardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.fileDropAreaCardEnterFullScreenButtonIcon
-          : this.fileDropAreaCardEnterFullScreenButtonIcon,
-      ),
-      fileDropAreaCardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.fileDropAreaCardEnterFullScreenButtonColor
-          : this.fileDropAreaCardEnterFullScreenButtonColor,
-      ),
-      fileDropAreaCardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.fileDropAreaCardExitFullScreenButtonIcon
-          : this.fileDropAreaCardExitFullScreenButtonIcon,
-      ),
-      fileDropAreaCardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.fileDropAreaCardExitFullScreenButtonColor
-          : this.fileDropAreaCardExitFullScreenButtonColor,
+          : this.fileDropAreaCardCssClass
      ),
    }).pipe(
      map((data) => {
@@ -785,7 +728,7 @@ export abstract class XComponentFileDropAreaContainerComponent
          //
          fileDropAreaFilesChangeEmiter: this.fileDropAreaFilesChangeEmiter,
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -96,11 +96,12 @@ export enum XFileUploadAction {

 export type XFileUploadActionIdentifier = XFileUploadAction | string;

-export interface XFileUploadActionModel extends XBaseActionModel<XFileUploadActionIdentifier> {}
+export interface XFileUploadActionModel
+  extends XBaseActionModel<XFileUploadActionIdentifier> {}

 export const defaultFileUploadListFilteringHandler: XListFilteringHandler = (
  query: string,
-  items: XListItem<File>[],
+  items: XListItem<File>[]
 ) => {
  //
  if (!query || !hasChild(items)) {
@@ -109,7 +110,7 @@ export const defaultFileUploadListFilteringHandler: XListFilteringHandler = (

  //
  return items.filter((i) =>
-    toNormalString(fileToJsonString(i.data)).includes(toNormalString(query)),
+    toNormalString(fileToJsonString(i.data)).includes(toNormalString(query))
  );
 };

@@ -129,7 +130,8 @@ type TXFileUploadContainer = IXComponentCardContainer &
  IXFileContainer;

 export interface IXFileUploadContainer
-  extends IXBaseContainer, TXFileUploadContainer {
+  extends IXBaseContainer,
+    TXFileUploadContainer {
  //
  actionProvider: Subject<XFileUploadActionModel>;
  cssClass: XStandardType<XOneOrManyType<string>>;
@@ -168,8 +170,9 @@ export class XFileUploadContainer
  readonly foregroundColor: XStandardType<boolean> = false;

  //
-  readonly fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> =
-    new EventEmitter<XOneOrManyType<File | XFileBlob>>();
+  readonly fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> = new EventEmitter<
+    XOneOrManyType<File | XFileBlob>
+  >();

  readonly actionBarHideActions: XStandardType<
    XOneOrManyType<XActionBarActionIdentifier>
@@ -250,16 +253,6 @@ export class XFileUploadContainer
    this.cardPropertyProvider.cardShowFooter;
  readonly cardShowActions: XStandardType<boolean> =
    this.cardPropertyProvider.cardShowActions;
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardPropertyProvider.cardShowFullScreenButton;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -445,7 +438,7 @@ export class XFileUploadContainer
    protected emptyPropertyProvider: XComponentEmptyContainer,
    protected actionBarPropertyProvider: XComponentActionBarContainer,
    protected searchBarPropertyProvider: XComponentSearchBarContainer,
-    protected fileDropAreaPropertyProvider: XComponentFileDropAreaContainer,
+    protected fileDropAreaPropertyProvider: XComponentFileDropAreaContainer
  ) {
    super();
  }
@@ -483,8 +476,7 @@ export abstract class XFileUploadContainerComponent

  //
  @Output()
-  fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> =
-    new EventEmitter();
+  fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> = new EventEmitter();

  @Input()
  actionBarHideActions: XStandardType<
@@ -604,26 +596,6 @@ export abstract class XFileUploadContainerComponent
  @Input()
  cardShowActions: XStandardType<boolean> =
    this.propertyProvider.cardShowActions;
-
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -694,8 +666,7 @@ export abstract class XFileUploadContainerComponent

  //
  @Output()
-  actionBarActionFired: EventEmitter<XActionBarActionFiredModel> =
-    new EventEmitter<XActionBarActionFiredModel>();
+  actionBarActionFired: EventEmitter<XActionBarActionFiredModel> = new EventEmitter<XActionBarActionFiredModel>();
  //#endregion

  //
@@ -917,7 +888,7 @@ export abstract class XFileUploadContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XFileUploadContainer,
+    protected propertyProvider: XFileUploadContainer
  ) {
    super(
      config,
@@ -926,7 +897,7 @@ export abstract class XFileUploadContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -934,342 +905,313 @@ export abstract class XFileUploadContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXFileUploadContainer,
+    container?: IXFileUploadContainer
  ): Observable<IXFileUploadContainer> {
    return forkJoin({
      //
      cssClass: this.getValue(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
      ),
      actionBarHideActions: this.getValue(
-        container ? container.actionBarHideActions : this.actionBarHideActions,
+        container ? container.actionBarHideActions : this.actionBarHideActions
      ),
      showFileDropArea: this.getValue(
-        container ? container.showFileDropArea : this.showFileDropArea,
+        container ? container.showFileDropArea : this.showFileDropArea
      ),
      fileDropAreaCssClass: this.getValue(
-        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass,
+        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass
      ),
      fileDropAreaColor: this.getValue(
-        container ? container.fileDropAreaColor : this.fileDropAreaColor,
+        container ? container.fileDropAreaColor : this.fileDropAreaColor
      ),
      fileDropAreaForegroundColor: this.getValue(
        container
          ? container.fileDropAreaForegroundColor
-          : this.fileDropAreaForegroundColor,
+          : this.fileDropAreaForegroundColor
      ),
      fileDropAreaIcon: this.getValue(
-        container ? container.fileDropAreaIcon : this.fileDropAreaIcon,
+        container ? container.fileDropAreaIcon : this.fileDropAreaIcon
      ),
      fileDropAreaMessage: this.getValue(
-        container ? container.fileDropAreaMessage : this.fileDropAreaMessage,
+        container ? container.fileDropAreaMessage : this.fileDropAreaMessage
      ),
      fileDropAreaDisableFileCheck: this.getValue(
        container
          ? container.fileDropAreaDisableFileCheck
-          : this.fileDropAreaDisableFileCheck,
+          : this.fileDropAreaDisableFileCheck
      ),
      fileDropAreaSupportsMultipleFiles: this.getValue(
        container
          ? container.fileDropAreaSupportsMultipleFiles
-          : this.fileDropAreaSupportsMultipleFiles,
+          : this.fileDropAreaSupportsMultipleFiles
      ),
      fileDropAreaAllowedExtensions: this.getValue(
        container
          ? container.fileDropAreaAllowedExtensions
-          : this.fileDropAreaAllowedExtensions,
+          : this.fileDropAreaAllowedExtensions
      ),
      fileDropAreaDragDisabled: this.getValue(
        container
          ? container.fileDropAreaDragDisabled
-          : this.fileDropAreaDragDisabled,
+          : this.fileDropAreaDragDisabled
      ),
      fileDropAreaContentTemplate: this.getValue(
        container
          ? container.fileDropAreaContentTemplate
-          : this.fileDropAreaContentTemplate,
+          : this.fileDropAreaContentTemplate
      ),
      fileDropAreaSuccessColor: this.getValue(
        container
          ? container.fileDropAreaSuccessColor
-          : this.fileDropAreaSuccessColor,
+          : this.fileDropAreaSuccessColor
      ),
      fileDropAreaErrorColor: this.getValue(
        container
          ? container.fileDropAreaErrorColor
-          : this.fileDropAreaErrorColor,
+          : this.fileDropAreaErrorColor
      ),
      fileDropAreaAccentColor: this.getValue(
        container
          ? container.fileDropAreaAccentColor
-          : this.fileDropAreaAccentColor,
+          : this.fileDropAreaAccentColor
      ),
      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,
-      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
+        container ? container.cardShowActions : this.cardShowActions
      ),
      showList: this.getValue(container ? container.showList : this.showList),
      listConfirmRemove: this.getValue(
-        container ? container.listConfirmRemove : this.listConfirmRemove,
+        container ? container.listConfirmRemove : this.listConfirmRemove
      ),
      listCssClass: this.getValue(
-        container ? container.listCssClass : this.listCssClass,
+        container ? container.listCssClass : this.listCssClass
      ),
      listShowToolbar: this.getValue(
-        container ? container.listShowToolbar : this.listShowToolbar,
+        container ? container.listShowToolbar : this.listShowToolbar
      ),
      listStickyToolbar: this.getValue(
-        container ? container.listStickyToolbar : this.listStickyToolbar,
+        container ? container.listStickyToolbar : this.listStickyToolbar
      ),
      listEnableReordering: this.getValue(
-        container ? container.listEnableReordering : this.listEnableReordering,
+        container ? container.listEnableReordering : this.listEnableReordering
      ),
      listShowDivider: this.getValue(
-        container ? container.listShowDivider : this.listShowDivider,
+        container ? container.listShowDivider : this.listShowDivider
      ),
      listFilteringHandler: this.getValue(
-        container ? container.listFilteringHandler : this.listFilteringHandler,
+        container ? container.listFilteringHandler : this.listFilteringHandler
      ),
      showActionBar: this.getValue(
-        container ? container.showActionBar : this.showActionBar,
+        container ? container.showActionBar : this.showActionBar
      ),
      actionBarCssClass: this.getValue(
-        container ? container.actionBarCssClass : this.actionBarCssClass,
+        container ? container.actionBarCssClass : this.actionBarCssClass
      ),
      actionBarColor: this.getValue(
-        container ? container.actionBarColor : this.actionBarColor,
+        container ? container.actionBarColor : this.actionBarColor
      ),
      actionBarForegroundColor: this.getValue(
        container
          ? container.actionBarForegroundColor
-          : this.actionBarForegroundColor,
+          : this.actionBarForegroundColor
      ),
      actionBarActions: this.getValue(
-        container ? container.actionBarActions : this.actionBarActions,
+        container ? container.actionBarActions : this.actionBarActions
      ),
      showSearchBar: this.getValue(
-        container ? container.showSearchBar : this.showSearchBar,
+        container ? container.showSearchBar : this.showSearchBar
      ),
      searchBarCssClass: this.getValue(
-        container ? container.searchBarCssClass : this.searchBarCssClass,
+        container ? container.searchBarCssClass : this.searchBarCssClass
      ),
      searchBarColor: this.getValue(
-        container ? container.searchBarColor : this.searchBarColor,
+        container ? container.searchBarColor : this.searchBarColor
      ),
      searchBarForegroundColor: this.getValue(
        container
          ? container.searchBarForegroundColor
-          : this.searchBarForegroundColor,
+          : this.searchBarForegroundColor
      ),
      searchBarSearchInputColor: this.getValue(
        container
          ? container.searchBarSearchInputColor
-          : this.searchBarSearchInputColor,
+          : this.searchBarSearchInputColor
      ),
      searchBarForegroundSearchInputColor: this.getValue(
        container
          ? container.searchBarForegroundSearchInputColor
-          : this.searchBarForegroundSearchInputColor,
+          : this.searchBarForegroundSearchInputColor
      ),
      searchBarType: this.getValue(
-        container ? container.searchBarType : this.searchBarType,
+        container ? container.searchBarType : this.searchBarType
      ),
      searchBarTitle: this.getValue(
-        container ? container.searchBarTitle : this.searchBarTitle,
+        container ? container.searchBarTitle : this.searchBarTitle
      ),
      searchBarValue: this.getValue(
-        container ? container.searchBarValue : this.searchBarValue,
+        container ? container.searchBarValue : this.searchBarValue
      ),
      searchBarEnterKeyHint: this.getValue(
-        container
-          ? container.searchBarEnterKeyHint
-          : this.searchBarEnterKeyHint,
+        container ? container.searchBarEnterKeyHint : this.searchBarEnterKeyHint
      ),
      searchBarKeyboardType: this.getValue(
-        container
-          ? container.searchBarKeyboardType
-          : this.searchBarKeyboardType,
+        container ? container.searchBarKeyboardType : this.searchBarKeyboardType
      ),
      searchBarSpellcheck: this.getValue(
-        container ? container.searchBarSpellcheck : this.searchBarSpellcheck,
+        container ? container.searchBarSpellcheck : this.searchBarSpellcheck
      ),
      searchBarDebounce: this.getValue(
-        container ? container.searchBarDebounce : this.searchBarDebounce,
+        container ? container.searchBarDebounce : this.searchBarDebounce
      ),
      searchBarShowCancelButton: this.getValue(
        container
          ? container.searchBarShowCancelButton
-          : this.searchBarShowCancelButton,
+          : this.searchBarShowCancelButton
      ),
      searchBarCancelButtonIcon: this.getValue(
        container
          ? container.searchBarCancelButtonIcon
-          : this.searchBarCancelButtonIcon,
+          : this.searchBarCancelButtonIcon
      ),
      searchBarCancelButtonTitle: this.getValue(
        container
          ? container.searchBarCancelButtonTitle
-          : this.searchBarCancelButtonTitle,
+          : this.searchBarCancelButtonTitle
      ),
      searchBarCancelButtonIconColor: this.getValue(
        container
          ? container.searchBarCancelButtonIconColor
-          : this.searchBarCancelButtonIconColor,
+          : this.searchBarCancelButtonIconColor
      ),
      searchBarShowClearButton: this.getValue(
        container
          ? container.searchBarShowClearButton
-          : this.searchBarShowClearButton,
+          : this.searchBarShowClearButton
      ),
      searchBarClearButtonIcon: this.getValue(
        container
          ? container.searchBarClearButtonIcon
-          : this.searchBarClearButtonIcon,
+          : this.searchBarClearButtonIcon
      ),
      searchBarClearButtonIconColor: this.getValue(
        container
          ? container.searchBarClearButtonIconColor
-          : this.searchBarClearButtonIconColor,
+          : this.searchBarClearButtonIconColor
      ),
      searchBarSearchButtonIcon: this.getValue(
        container
          ? container.searchBarSearchButtonIcon
-          : this.searchBarSearchButtonIcon,
+          : this.searchBarSearchButtonIcon
      ),
      searchBarSearchButtonIconColor: this.getValue(
        container
          ? container.searchBarSearchButtonIconColor
-          : this.searchBarSearchButtonIconColor,
+          : this.searchBarSearchButtonIconColor
      ),
      showEmpty: this.getValue(
-        container ? container.showEmpty : this.showEmpty,
+        container ? container.showEmpty : this.showEmpty
      ),
      emptyCssClass: this.getValue(
-        container ? container.emptyCssClass : this.emptyCssClass,
+        container ? container.emptyCssClass : this.emptyCssClass
      ),
      emptyColor: this.getValue(
-        container ? container.emptyColor : this.emptyColor,
+        container ? container.emptyColor : this.emptyColor
      ),
      emptyForegroundColor: this.getValue(
-        container ? container.emptyForegroundColor : this.emptyForegroundColor,
+        container ? container.emptyForegroundColor : this.emptyForegroundColor
      ),
      emptyMessage: this.getValue(
-        container ? container.emptyMessage : this.emptyMessage,
+        container ? container.emptyMessage : this.emptyMessage
      ),
      emptyMessageColor: this.getValue(
-        container ? container.emptyMessageColor : this.emptyMessageColor,
+        container ? container.emptyMessageColor : this.emptyMessageColor
      ),
      emptyForegroundMessageColor: this.getValue(
        container
          ? container.emptyForegroundMessageColor
-          : this.emptyForegroundMessageColor,
+          : this.emptyForegroundMessageColor
      ),
      emptyHasRefresh: this.getValue(
-        container ? container.emptyHasRefresh : this.emptyHasRefresh,
+        container ? container.emptyHasRefresh : this.emptyHasRefresh
      ),
      emptyRefreshButtonColor: this.getValue(
        container
          ? container.emptyRefreshButtonColor
-          : this.emptyRefreshButtonColor,
+          : this.emptyRefreshButtonColor
      ),
      emptyForegroundRefreshButtonColor: this.getValue(
        container
          ? container.emptyForegroundRefreshButtonColor
-          : this.emptyForegroundRefreshButtonColor,
+          : this.emptyForegroundRefreshButtonColor
      ),
      emptyRefreshIcon: this.getValue(
-        container ? container.emptyRefreshIcon : this.emptyRefreshIcon,
+        container ? container.emptyRefreshIcon : this.emptyRefreshIcon
      ),
      emptyFileException: this.getValue(
-        container ? container.emptyFileException : this.emptyFileException,
+        container ? container.emptyFileException : this.emptyFileException
      ),
      notAllowedFileException: this.getValue(
        container
          ? container.notAllowedFileException
-          : this.notAllowedFileException,
+          : this.notAllowedFileException
      ),
      allowedExtensions: this.getValue(
-        container ? container.allowedExtensions : this.allowedExtensions,
+        container ? container.allowedExtensions : this.allowedExtensions
      ),
      maxAllowedFiles: this.getValue(
-        container ? container.maxAllowedFiles : this.maxAllowedFiles,
+        container ? container.maxAllowedFiles : this.maxAllowedFiles
      ),
      maxAllowedFilesException: this.getValue(
        container
          ? container.maxAllowedFilesException
-          : this.maxAllowedFilesException,
+          : this.maxAllowedFilesException
      ),
      maxAllowedSize: this.getValue(
-        container ? container.maxAllowedSize : this.maxAllowedSize,
+        container ? container.maxAllowedSize : this.maxAllowedSize
      ),
      maxAllowedSizeException: this.getValue(
        container
          ? container.maxAllowedSizeException
-          : this.maxAllowedSizeException,
+          : this.maxAllowedSizeException
      ),
      minAllowedFileSize: this.getValue(
-        container ? container.minAllowedFileSize : this.minAllowedFileSize,
+        container ? container.minAllowedFileSize : this.minAllowedFileSize
      ),
      minAllowedFileSizeException: this.getValue(
        container
          ? container.minAllowedFileSizeException
-          : this.minAllowedFileSizeException,
+          : this.minAllowedFileSizeException
      ),
      maxAllowedFileSize: this.getValue(
-        container ? container.maxAllowedFileSize : this.maxAllowedFileSize,
+        container ? container.maxAllowedFileSize : this.maxAllowedFileSize
      ),
      maxAllowedFileSizeException: this.getValue(
        container
          ? container.maxAllowedFileSizeException
-          : this.maxAllowedFileSizeException,
+          : this.maxAllowedFileSizeException
      ),
    }).pipe(
      map((data) => {
@@ -1328,7 +1270,7 @@ export abstract class XFileUploadContainerComponent
          //
          emptyRefresh: this.emptyRefresh,
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -16,6 +16,7 @@ import {
  isDate,
  assign,
  entries,
+  XUiEvent,
  hasChild,
  isFunction,
  parseXColor,
@@ -38,7 +38,6 @@ import {
 import { forkJoin, Observable, Subject } from 'rxjs';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { XManagerService } from 'x-framework-services';
-import { XIconIdentifier } from '../x-icon/x-icon.typings';
 import { XBaseActionModel } from '../classes/x-base-action.model';
 import { XPopoverService } from '../dialogs/x-popover/x-popover.service';
 import { XTabAlign, XTabAlignIdentifier } from '../x-tabs/x-tabs.typings';
@@ -84,7 +83,8 @@ export enum XIDEAction {

 export type XIDEActionIdentifier = XIDEAction | string;

-export interface XIDEActionModel extends XBaseActionModel<XIDEActionIdentifier> {}
+export interface XIDEActionModel
+  extends XBaseActionModel<XIDEActionIdentifier> {}
 //#endregion

 //
@@ -520,16 +520,6 @@ export class XIDEContainer extends XBaseContainer implements IXIDEContainer {
    this.cardPropertyProvider.cardShowFooter;
  readonly cardShowActions: XStandardType<boolean> =
    this.cardPropertyProvider.cardShowActions;
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardPropertyProvider.cardShowFullScreenButton;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -555,7 +545,7 @@ export class XIDEContainer extends XBaseContainer implements IXIDEContainer {
  //#region Constructor ...
  constructor(
    protected cardPropertyProvider: XComponentCardContainer,
-    protected actionBarPropertyProvider: XComponentActionBarContainer,
+    protected actionBarPropertyProvider: XComponentActionBarContainer
  ) {
    super();
  }
@@ -582,8 +572,7 @@ export class XIDEContainerComponent
  defaultTabName: XStandardType<string> = this.propertyProvider.defaultTabName;

  @Input()
-  hasCloseOnDefaultTab: XStandardType<boolean> =
-    this.propertyProvider.hasCloseOnDefaultTab;
+  hasCloseOnDefaultTab: XStandardType<boolean> = this.propertyProvider.hasCloseOnDefaultTab;

  @Input()
  theme: XStandardType<XIDEThemeIdentifier> = this.propertyProvider.theme;
@@ -702,27 +691,6 @@ export class XIDEContainerComponent
  @Input()
  cardActionProvider: Subject<XCardActionModel> =
    this.propertyProvider.cardActionProvider;
-
-  //
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -767,7 +735,7 @@ export class XIDEContainerComponent
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
    protected propertyProvider: XIDEContainer,
-    protected popoverService: XPopoverService,
+    protected popoverService: XPopoverService
  ) {
    super(
      config,
@@ -776,7 +744,7 @@ export class XIDEContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -795,43 +763,43 @@ export class XIDEContainerComponent
      mode: this.getValue(container ? container.mode : this.mode),
      theme: this.getValue(container ? container.theme : this.theme),
      highlightActiveLine: this.getValue(
-        container ? container.highlightActiveLine : this.highlightActiveLine,
+        container ? container.highlightActiveLine : this.highlightActiveLine
      ),
      cssClass: this.getArrayValue(
-        container ? container.cssClass : this.cssClass,
+        container ? container.cssClass : this.cssClass
      ),
      basicAutocompletion: this.getValue(
-        container ? container.basicAutocompletion : this.basicAutocompletion,
+        container ? container.basicAutocompletion : this.basicAutocompletion
      ),
      wordWrapping: this.getValue(
-        container ? container.wordWrapping : this.wordWrapping,
+        container ? container.wordWrapping : this.wordWrapping
      ),
      showPrintMargin: this.getValue(
-        container ? container.showPrintMargin : this.showPrintMargin,
+        container ? container.showPrintMargin : this.showPrintMargin
      ),
      showLineNumbers: this.getValue(
-        container ? container.showLineNumbers : this.showLineNumbers,
+        container ? container.showLineNumbers : this.showLineNumbers
      ),
      showFoldWidgets: this.getValue(
-        container ? container.showFoldWidgets : this.showFoldWidgets,
+        container ? container.showFoldWidgets : this.showFoldWidgets
      ),
      defaultTabName: this.getValue(
-        container ? container.defaultTabName : this.defaultTabName,
+        container ? container.defaultTabName : this.defaultTabName
      ),
      hasCloseOnDefaultTab: this.getValue(
-        container ? container.hasCloseOnDefaultTab : this.hasCloseOnDefaultTab,
+        container ? container.hasCloseOnDefaultTab : this.hasCloseOnDefaultTab
      ),

      //
      //#region Tabs ...
      alignTabs: this.getValue(
-        container ? container.alignTabs : this.alignTabs,
+        container ? container.alignTabs : this.alignTabs
      ),
      tabHeaderColor: this.getValue(
-        container ? container.tabHeaderColor : this.tabHeaderColor,
+        container ? container.tabHeaderColor : this.tabHeaderColor
      ),
      activeTabColor: this.getValue(
-        container ? container.activeTabColor : this.activeTabColor,
+        container ? container.activeTabColor : this.activeTabColor
      ),
      //#endregion

@@ -840,87 +808,62 @@ export class XIDEContainerComponent
      defaultActionBarItemColor: this.getValue(
        container
          ? container.defaultActionBarItemColor
-          : this.defaultActionBarItemColor,
+          : this.defaultActionBarItemColor
      ),
      availableActionBarItems: this.getArrayValue(
        container
          ? container.availableActionBarItems
-          : this.availableActionBarItems,
+          : this.availableActionBarItems
      ),
      //#endregion

      //
      //#region XComponentCard ...
      cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass,
+        container ? container.cardCssClass : this.cardCssClass
      ),
      isInPage: this.getValue(container ? container.isInPage : this.isInPage),
      wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard,
+        container ? container.wrapWithCard : this.wrapWithCard
      ),
      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
      ),
      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,
-      ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
+        container ? container.cardSubTitle : this.cardSubTitle
      ),
      //#endregion

      //
      //#region XComponentActionBar ...
      showActionBar: this.getValue(
-        container ? container.showActionBar : this.showActionBar,
+        container ? container.showActionBar : this.showActionBar
      ),
      actionBarCssClass: this.getValue(
-        container ? container.actionBarCssClass : this.actionBarCssClass,
+        container ? container.actionBarCssClass : this.actionBarCssClass
      ),
      actionBarColor: this.getValue(
-        container ? container.actionBarColor : this.actionBarColor,
+        container ? container.actionBarColor : this.actionBarColor
      ),
      actionBarForegroundColor: this.getValue(
        container
          ? container.actionBarForegroundColor
-          : this.actionBarForegroundColor,
+          : this.actionBarForegroundColor
      ),
      actionBarActions: this.getValue(
-        container ? container.actionBarActions : this.actionBarActions,
+        container ? container.actionBarActions : this.actionBarActions
      ),
      //#endregion
    }).pipe(
@@ -948,7 +891,7 @@ export class XIDEContainerComponent
          contentChange: this.contentChange,
          actionBarActionFired: this.actionBarActionFired,
        };
-      }),
+      })
    );
  }
  //#endregion
@@ -103,11 +103,12 @@ export enum XListAction {

 export type XListActionIdentifier = XListAction | string;

-export interface XListActionModel extends XBaseActionModel<XListActionIdentifier> {}
+export interface XListActionModel
+  extends XBaseActionModel<XListActionIdentifier> {}

 export type XListFilteringHandler = (
  query: string,
-  source: XListItem<any>[],
+  source: XListItem<any>[]
 ) => XStandardType<XListItem<any>[]>;

 export function itemToJson(item: any) {
@@ -116,7 +117,7 @@ export function itemToJson(item: any) {

 export const defaultListFilteringHandler: XListFilteringHandler = (
  query: string,
-  items: XListItem<any>[],
+  items: XListItem<any>[]
 ) => {
  //
  if (!query || !hasChild(items)) {
@@ -125,7 +126,7 @@ export const defaultListFilteringHandler: XListFilteringHandler = (

  //
  const result = items.filter((i) =>
-    toNormalString(itemToJson(i.data)).includes(toNormalString(query)),
+    toNormalString(itemToJson(i.data)).includes(toNormalString(query))
  );

  //
@@ -335,8 +336,7 @@ export abstract class XListContainerComponent
  itemSelected: EventEmitter<XListItem<any>> = new EventEmitter();

  @Output()
-  optionSelected: EventEmitter<XListItemOptionSelectedEvent> =
-    new EventEmitter();
+  optionSelected: EventEmitter<XListItemOptionSelectedEvent> = new EventEmitter();

  @Input()
  confirmRemove: XStandardType<boolean> = this.propertyProvider.confirmRemove;
@@ -379,7 +379,7 @@ export abstract class XListContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XListContainer,
+    protected propertyProvider: XListContainer
  ) {
    super(
      config,
@@ -389,7 +389,7 @@ export abstract class XListContainerComponent
      ruler,
      zone,
      changeDetector,
-      propertyProvider,
+      propertyProvider
    );
  }
  //#endregion
@@ -397,7 +397,7 @@ export abstract class XListContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXListContainer,
+    container?: IXListContainer
  ): Observable<IXListContainer> {
    return super
      .extractProps(container ? container : this)
@@ -405,73 +405,71 @@ export abstract class XListContainerComponent
        concatMap((superData) => {
          return forkJoin({
            cssClass: this.getValue(
-              container ? container.cssClass : this.cssClass,
+              container ? container.cssClass : this.cssClass
            ),
            actionBarHideActions: this.getValue(
              container
                ? container.actionBarHideActions
-                : this.actionBarHideActions,
+                : this.actionBarHideActions
            ),
            useDefaultActions: this.getValue(
-              container ? container.useDefaultActions : this.useDefaultActions,
+              container ? container.useDefaultActions : this.useDefaultActions
            ),
            showToolbar: this.getValue(
-              container ? container.showToolbar : this.showToolbar,
+              container ? container.showToolbar : this.showToolbar
            ),
            stickyToolbar: this.getValue(
-              container ? container.stickyToolbar : this.stickyToolbar,
+              container ? container.stickyToolbar : this.stickyToolbar
            ),
            color: this.getValue(container ? container.color : this.color),
            foregroundColor: this.getValue(
-              container ? container.foregroundColor : this.foregroundColor,
+              container ? container.foregroundColor : this.foregroundColor
            ),
            enableReordering: this.getValue(
-              container ? container.enableReordering : this.enableReordering,
+              container ? container.enableReordering : this.enableReordering
            ),
            showDivider: this.getValue(
-              container ? container.showDivider : this.showDivider,
+              container ? container.showDivider : this.showDivider
            ),
            showOptionsAsSlide: this.getValue(
-              container
-                ? container.showOptionsAsSlide
-                : this.showOptionsAsSlide,
+              container ? container.showOptionsAsSlide : this.showOptionsAsSlide
            ),
            closeOptionsAfterSelect: this.getValue(
              container
                ? container.closeOptionsAfterSelect
-                : this.closeOptionsAfterSelect,
+                : this.closeOptionsAfterSelect
            ),
            showOptionsAsMenu: this.getValue(
-              container ? container.showOptionsAsMenu : this.showOptionsAsMenu,
+              container ? container.showOptionsAsMenu : this.showOptionsAsMenu
            ),
            selectableItems: this.getValue(
-              container ? container.selectableItems : this.selectableItems,
+              container ? container.selectableItems : this.selectableItems
            ),
            clickableItems: this.getValue(
-              container ? container.clickableItems : this.clickableItems,
+              container ? container.clickableItems : this.clickableItems
            ),
            itemTemplate: this.getValue(
-              container ? container.itemTemplate : this.itemTemplate,
+              container ? container.itemTemplate : this.itemTemplate
            ),
            slidingOptionTemplate: this.getValue(
              container
                ? container.slidingOptionTemplate
-                : this.slidingOptionTemplate,
+                : this.slidingOptionTemplate
            ),
            nonSlidingOptionTemplate: this.getValue(
              container
                ? container.nonSlidingOptionTemplate
-                : this.nonSlidingOptionTemplate,
+                : this.nonSlidingOptionTemplate
            ),
            confirmRemove: this.getValue(
-              container ? container.confirmRemove : this.confirmRemove,
+              container ? container.confirmRemove : this.confirmRemove
            ),
            items: this.getValue(container ? container.items : this.items),
            showItemOptions: this.getValue(
-              container ? container.showItemOptions : this.showItemOptions,
+              container ? container.showItemOptions : this.showItemOptions
            ),
            filteringHandler: this.getValue(
-              container ? container.filteringHandler : this.filteringHandler,
+              container ? container.filteringHandler : this.filteringHandler
            ),
          }).pipe(
            map((data) => {
@@ -479,9 +477,9 @@ export abstract class XListContainerComponent
                superData,
                data,
              };
-            }),
+            })
          );
-        }),
+        })
      )
      .pipe(
        map((info) => {
@@ -505,7 +503,7 @@ export abstract class XListContainerComponent
            selectionChanged: this.selectionChanged,
            orderChanged: this.orderChanged,
          };
-        }),
+        })
      );
  }
  //#endregion
@@ -521,7 +519,8 @@ type TXComponentListContainer = {
 };

 export interface IXComponentListContainer
-  extends TXComponentListContainer, IXBaseComponentContainer {
+  extends TXComponentListContainer,
+    IXBaseComponentContainer {
  showList: XStandardType<boolean>;
 }

@@ -633,16 +632,6 @@ export class XComponentListContainer
    this.propertyProvider.cardSubTitle;
  readonly listCardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.cardCssClass;
-  readonly listCardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-  readonly listCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-  readonly listCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
-  readonly listCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-  readonly listCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
@@ -880,8 +869,7 @@ export abstract class XComponentListContainerComponent
  listItemSelected: EventEmitter<XListItem<any>> = new EventEmitter();

  @Output()
-  listOptionSelected: EventEmitter<XListItemOptionSelectedEvent> =
-    new EventEmitter();
+  listOptionSelected: EventEmitter<XListItemOptionSelectedEvent> = new EventEmitter();

  @Input()
  listConfirmRemove: XStandardType<boolean> =
@@ -952,26 +940,6 @@ export abstract class XComponentListContainerComponent
  @Input()
  listCardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.listCardCssClass;
-
-  @Input()
-  listCardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.listCardShowFullScreenButton;
-
-  @Input()
-  listCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.listCardEnterFullScreenButtonIcon;
-
-  @Input()
-  listCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.listCardEnterFullScreenButtonColor;
-
-  @Input()
-  listCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.listCardExitFullScreenButtonIcon;
-
-  @Input()
-  listCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.listCardExitFullScreenButtonColor;
  //#endregion

  //
@@ -1060,8 +1028,7 @@ export abstract class XComponentListContainerComponent

  //
  @Output()
-  listActionBarActionFired: EventEmitter<XActionBarActionFiredModel> =
-    new EventEmitter<XActionBarActionFiredModel>();
+  listActionBarActionFired: EventEmitter<XActionBarActionFiredModel> = new EventEmitter<XActionBarActionFiredModel>();
  //#endregion

  //
@@ -1186,7 +1153,7 @@ export abstract class XComponentListContainerComponent
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentListContainer,
+    protected propertyProvider: XComponentListContainer
  ) {
    super(
      config,
@@ -1195,7 +1162,7 @@ export abstract class XComponentListContainerComponent
      renderer,
      ruler,
      zone,
-      changeDetector,
+      changeDetector
    );
  }
  //#endregion
@@ -1203,303 +1170,266 @@ export abstract class XComponentListContainerComponent
  //
  //#region Abstract ...
  public extractProps(
-    container?: IXComponentListContainer,
+    container?: IXComponentListContainer
  ): Observable<IXComponentListContainer> {
    return forkJoin({
      //
      showList: this.getValue(container ? container.showList : this.showList),
      listCssClass: this.getValue(
-        container ? container.listCssClass : this.listCssClass,
+        container ? container.listCssClass : this.listCssClass
      ),
      listActionBarHideActions: this.getValue(
        container
          ? container.listActionBarHideActions
-          : this.listActionBarHideActions,
+          : this.listActionBarHideActions
      ),
      listUseDefaultActions: this.getValue(
-        container
-          ? container.listUseDefaultActions
-          : this.listUseDefaultActions,
+        container ? container.listUseDefaultActions : this.listUseDefaultActions
      ),
      listShowToolbar: this.getValue(
-        container ? container.listShowToolbar : this.listShowToolbar,
+        container ? container.listShowToolbar : this.listShowToolbar
      ),
      listStickyToolbar: this.getValue(
-        container ? container.listStickyToolbar : this.listStickyToolbar,
+        container ? container.listStickyToolbar : this.listStickyToolbar
      ),
      listColor: this.getValue(
-        container ? container.listColor : this.listColor,
+        container ? container.listColor : this.listColor
      ),
      listForegroundColor: this.getValue(
-        container ? container.listForegroundColor : this.listForegroundColor,
+        container ? container.listForegroundColor : this.listForegroundColor
      ),
      listEnableReordering: this.getValue(
-        container ? container.listEnableReordering : this.listEnableReordering,
+        container ? container.listEnableReordering : this.listEnableReordering
      ),
      listShowDivider: this.getValue(
-        container ? container.listShowDivider : this.listShowDivider,
+        container ? container.listShowDivider : this.listShowDivider
      ),
      listShowOptionsAsSlide: this.getValue(
        container
          ? container.listShowOptionsAsSlide
-          : this.listShowOptionsAsSlide,
+          : this.listShowOptionsAsSlide
      ),
      listCloseOptionsAfterSelect: this.getValue(
        container
          ? container.listCloseOptionsAfterSelect
-          : this.listCloseOptionsAfterSelect,
+          : this.listCloseOptionsAfterSelect
      ),
      listShowOptionsAsMenu: this.getValue(
-        container
-          ? container.listShowOptionsAsMenu
-          : this.listShowOptionsAsMenu,
+        container ? container.listShowOptionsAsMenu : this.listShowOptionsAsMenu
      ),
      listSelectableItems: this.getValue(
-        container ? container.listSelectableItems : this.listSelectableItems,
+        container ? container.listSelectableItems : this.listSelectableItems
      ),
      listClickableItems: this.getValue(
-        container ? container.listClickableItems : this.listClickableItems,
+        container ? container.listClickableItems : this.listClickableItems
      ),
      listItemTemplate: this.getValue(
-        container ? container.listItemTemplate : this.listItemTemplate,
+        container ? container.listItemTemplate : this.listItemTemplate
      ),
      listSlidingOptionTemplate: this.getValue(
        container
          ? container.listSlidingOptionTemplate
-          : this.listSlidingOptionTemplate,
+          : this.listSlidingOptionTemplate
      ),
      listNonSlidingOptionTemplate: this.getValue(
        container
          ? container.listNonSlidingOptionTemplate
-          : this.listNonSlidingOptionTemplate,
+          : this.listNonSlidingOptionTemplate
      ),
      listConfirmRemove: this.getValue(
-        container ? container.listConfirmRemove : this.listConfirmRemove,
+        container ? container.listConfirmRemove : this.listConfirmRemove
      ),
      listItems: this.getValue(
-        container ? container.listItems : this.listItems,
+        container ? container.listItems : this.listItems
      ),
      listShowItemOptions: this.getValue(
-        container ? container.listShowItemOptions : this.listShowItemOptions,
+        container ? container.listShowItemOptions : this.listShowItemOptions
      ),
      listFilteringHandler: this.getValue(
-        container ? container.listFilteringHandler : this.listFilteringHandler,
+        container ? container.listFilteringHandler : this.listFilteringHandler
      ),
      listIsInPage: this.getValue(
-        container ? container.listIsInPage : this.listIsInPage,
+        container ? container.listIsInPage : this.listIsInPage
      ),
      listWrapWithCard: this.getValue(
-        container ? container.listWrapWithCard : this.listWrapWithCard,
+        container ? container.listWrapWithCard : this.listWrapWithCard
      ),
      listCardShowFooter: this.getValue(
-        container ? container.listCardShowFooter : this.listCardShowFooter,
+        container ? container.listCardShowFooter : this.listCardShowFooter
      ),
      listCardShowActions: this.getValue(
-        container ? container.listCardShowActions : this.listCardShowActions,
+        container ? container.listCardShowActions : this.listCardShowActions
      ),
      listCardColor: this.getValue(
-        container ? container.listCardColor : this.listCardColor,
+        container ? container.listCardColor : this.listCardColor
      ),
      listCardForegroundColor: this.getValue(
        container
          ? container.listCardForegroundColor
-          : this.listCardForegroundColor,
+          : this.listCardForegroundColor
      ),
      listCardTitle: this.getValue(
-        container ? container.listCardTitle : this.listCardTitle,
+        container ? container.listCardTitle : this.listCardTitle
      ),
      listCardSubTitle: this.getValue(
-        container ? container.listCardSubTitle : this.listCardSubTitle,
+        container ? container.listCardSubTitle : this.listCardSubTitle
      ),
      listCardCssClass: this.getValue(
-        container ? container.listCardCssClass : this.listCardCssClass,
-      ),
-      listCardShowFullScreenButton: this.getValue(
-        container
-          ? container.listCardShowFullScreenButton
-          : this.listCardShowFullScreenButton,
-      ),
-      listCardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.listCardEnterFullScreenButtonIcon
-          : this.listCardEnterFullScreenButtonIcon,
-      ),
-      listCardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.listCardEnterFullScreenButtonColor
-          : this.listCardEnterFullScreenButtonColor,
-      ),
-      listCardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.listCardExitFullScreenButtonIcon
-          : this.listCardExitFullScreenButtonIcon,
-      ),
-      listCardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.listCardExitFullScreenButtonColor
-          : this.listCardExitFullScreenButtonColor,
+        container ? container.listCardCssClass : this.listCardCssClass
      ),
      listShowEmpty: this.getValue(
-        container ? container.listShowEmpty : this.listShowEmpty,
+        container ? container.listShowEmpty : this.listShowEmpty
      ),
      listEmptyHasRefresh: this.getValue(
-        container ? container.listEmptyHasRefresh : this.listEmptyHasRefresh,
+        container ? container.listEmptyHasRefresh : this.listEmptyHasRefresh
      ),
      listEmptyCssClass: this.getValue(
-        container ? container.listEmptyCssClass : this.listEmptyCssClass,
+        container ? container.listEmptyCssClass : this.listEmptyCssClass
      ),
      listEmptyColor: this.getValue(
-        container ? container.listEmptyColor : this.listEmptyColor,
+        container ? container.listEmptyColor : this.listEmptyColor
      ),
      listEmptyForegroundColor: this.getValue(
        container
          ? container.listEmptyForegroundColor
-          : this.listEmptyForegroundColor,
+          : this.listEmptyForegroundColor
      ),
      listEmptyMessageColor: this.getValue(
-        container
-          ? container.listEmptyMessageColor
-          : this.listEmptyMessageColor,
+        container ? container.listEmptyMessageColor : this.listEmptyMessageColor
      ),
      listEmptyForegroundMessageColor: this.getValue(
        container
          ? container.listEmptyForegroundMessageColor
-          : this.listEmptyForegroundMessageColor,
+          : this.listEmptyForegroundMessageColor
      ),
      listEmptyRefreshButtonColor: this.getValue(
        container
          ? container.listEmptyRefreshButtonColor
-          : this.listEmptyRefreshButtonColor,
+          : this.listEmptyRefreshButtonColor
      ),
      listEmptyForegroundRefreshButtonColor: this.getValue(
        container
          ? container.listEmptyForegroundRefreshButtonColor
-          : this.listEmptyForegroundRefreshButtonColor,
+          : this.listEmptyForegroundRefreshButtonColor
      ),
      listEmptyMessage: this.getValue(
-        container ? container.listEmptyMessage : this.listEmptyMessage,
+        container ? container.listEmptyMessage : this.listEmptyMessage
      ),
      listEmptyRefreshIcon: this.getValue(
-        container ? container.listEmptyRefreshIcon : this.listEmptyRefreshIcon,
+        container ? container.listEmptyRefreshIcon : this.listEmptyRefreshIcon
      ),
      listShowActionBar: this.getValue(
-        container ? container.listShowActionBar : this.listShowActionBar,
+        container ? container.listShowActionBar : this.listShowActionBar
      ),
      listActionBarCssClass: this.getValue(
-        container
-          ? container.listActionBarCssClass
-          : this.listActionBarCssClass,
+        container ? container.listActionBarCssClass : this.listActionBarCssClass
      ),
      listActionBarColor: this.getValue(
-        container ? container.listActionBarColor : this.listActionBarColor,
+        container ? container.listActionBarColor : this.listActionBarColor
      ),
      listActionBarForegroundColor: this.getValue(
        container
          ? container.listActionBarForegroundColor
-          : this.listActionBarForegroundColor,
+          : this.listActionBarForegroundColor
      ),
      listActionBarActions: this.getValue(
-        container ? container.listActionBarActions : this.listActionBarActions,
+        container ? container.listActionBarActions : this.listActionBarActions
      ),
      listShowSearchBar: this.getValue(
-        container ? container.listShowSearchBar : this.listShowSearchBar,
+        container ? container.listShowSearchBar : this.listShowSearchBar
      ),
      listSearchBarCssClass: this.getValue(
-        container
-          ? container.listSearchBarCssClass
-          : this.listSearchBarCssClass,
+        container ? container.listSearchBarCssClass : this.listSearchBarCssClass
      ),
      listSearchBarColor: this.getValue(
-        container ? container.listSearchBarColor : this.listSearchBarColor,
+        container ? container.listSearchBarColor : this.listSearchBarColor
      ),
      listSearchBarForegroundColor: this.getValue(
        container
          ? container.listSearchBarForegroundColor
-          : this.listSearchBarForegroundColor,
+          : this.listSearchBarForegroundColor
      ),
      listSearchBarSearchInputColor: this.getValue(
        container
          ? container.listSearchBarSearchInputColor
-          : this.listSearchBarSearchInputColor,
+          : this.listSearchBarSearchInputColor
      ),
      listSearchBarForegroundSearchInputColor: this.getValue(
        container
          ? container.listSearchBarForegroundSearchInputColor
-          : this.listSearchBarForegroundSearchInputColor,
+          : this.listSearchBarForegroundSearchInputColor
      ),
      listSearchBarType: this.getValue(
-        container ? container.listSearchBarType : this.listSearchBarType,
+        container ? container.listSearchBarType : this.listSearchBarType
      ),
      listSearchBarTitle: this.getValue(
-        container ? container.listSearchBarTitle : this.listSearchBarTitle,
+        container ? container.listSearchBarTitle : this.listSearchBarTitle
      ),
      listSearchBarValue: this.getValue(
-        container ? container.listSearchBarValue : this.listSearchBarValue,
+        container ? container.listSearchBarValue : this.listSearchBarValue
      ),
      listSearchBarEnterKeyHint: this.getValue(
        container
          ? container.listSearchBarEnterKeyHint
-          : this.listSearchBarEnterKeyHint,
+          : this.listSearchBarEnterKeyHint
      ),
      listSearchBarKeyboardType: this.getValue(
        container
          ? container.listSearchBarKeyboardType
-          : this.listSearchBarKeyboardType,
+          : this.listSearchBarKeyboardType
      ),
      listSearchBarSpellcheck: this.getValue(
        container
          ? container.listSearchBarSpellcheck
-          : this.listSearchBarSpellcheck,
+          : this.listSearchBarSpellcheck
      ),
      listSearchBarDebounce: this.getValue(
-        container
-          ? container.listSearchBarDebounce
-          : this.listSearchBarDebounce,
+        container ? container.listSearchBarDebounce : this.listSearchBarDebounce
      ),
      listSearchBarShowCancelButton: this.getValue(
        container
          ? container.listSearchBarShowCancelButton
-          : this.listSearchBarShowCancelButton,
+          : this.listSearchBarShowCancelButton
      ),
      listSearchBarCancelButtonIcon: this.getValue(
        container
          ? container.listSearchBarCancelButtonIcon
-          : this.listSearchBarCancelButtonIcon,
+          : this.listSearchBarCancelButtonIcon
      ),
      listSearchBarCancelButtonTitle: this.getValue(
        container
          ? container.listSearchBarCancelButtonTitle
-          : this.listSearchBarCancelButtonTitle,
+          : this.listSearchBarCancelButtonTitle
      ),
      listSearchBarCancelButtonIconColor: this.getValue(
        container
          ? container.listSearchBarCancelButtonIconColor
-          : this.listSearchBarCancelButtonIconColor,
+          : this.listSearchBarCancelButtonIconColor
      ),
      listSearchBarShowClearButton: this.getValue(
        container
          ? container.listSearchBarShowClearButton
-          : this.listSearchBarShowClearButton,
+          : this.listSearchBarShowClearButton
      ),
      listSearchBarClearButtonIcon: this.getValue(
        container
          ? container.listSearchBarClearButtonIcon
-          : this.listSearchBarClearButtonIcon,
+          : this.listSearchBarClearButtonIcon
      ),
      listSearchBarClearButtonIconColor: this.getValue(
        container
          ? container.listSearchBarClearButtonIconColor
-          : this.listSearchBarClearButtonIconColor,
+          : this.listSearchBarClearButtonIconColor
      ),
      listSearchBarSearchButtonIcon: this.getValue(
        container
          ? container.listSearchBarSearchButtonIcon
-          : this.listSearchBarSearchButtonIcon,
+          : this.listSearchBarSearchButtonIcon
      ),
      listSearchBarSearchButtonIconColor: this.getValue(
        container
          ? container.listSearchBarSearchButtonIconColor
-          : this.listSearchBarSearchButtonIconColor,
+          : this.listSearchBarSearchButtonIconColor
      ),
    }).pipe(
      map((data) => {
@@ -1548,7 +1478,7 @@ export abstract class XComponentListContainerComponent
          listSearchBarQueryChange: this.listSearchBarQueryChange,
          listSearchBarOnEvent: this.listSearchBarOnEvent,
        };
-      }),
+      })
    );
  }
  //#endregion
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