try to implement fullscreen support for xCard Component ...

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

@@ -20,6 +20,20 @@ export class XCardComponent extends XCardContainerComponent {
   //#region Props ...
   //
   private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
+
+  //
+  // Full Screen ...
+  private IS_FULLSCREEN: boolean = false;
+  public set isFullscreen(v: boolean) {
+    //
+    const isChanged = v != this.IS_FULLSCREEN;
+
+    //
+    this.IS_FULLSCREEN = v;
+  }
+  public get isFullscreen() {
+    return this.IS_FULLSCREEN;
+  }
   //#endregion
 
   //
@@ -31,7 +45,7 @@ export class XCardComponent extends XCardContainerComponent {
     //#region Action Provider Changed ...
     //
     const isActionProviderChanged = changeKeys.includes(
-      nameof<XCardComponent>('actionProvider')
+      nameof<XCardComponent>('actionProvider'),
     );
     if (isActionProviderChanged) {
       this.registerActionProvider();
@@ -71,13 +85,72 @@ export class XCardComponent extends XCardContainerComponent {
               isNullOrEmptyString(object.title) &&
               isNullOrEmptyString(object.subTitle)
             );
-          })
+          }),
-        )
+        ),
-      )
+      ),
     );
   }
   //#endregion
 
+  //
+  //#region Actions ...
+  public async enterFullscreen(options?: FullscreenOptions) {
+    //
+    if (this.isFullscreen) {
+      return;
+    }
+
+    //
+    const element: HTMLElement = this.element?.nativeElement;
+    if (!element) {
+      return;
+    }
+
+    //
+    try {
+      //
+      if (!this.canUseFullscreen()) {
+        return;
+      }
+
+      //
+      await element.requestFullscreen(options);
+
+      //
+      this.isFullscreen = true;
+      this.detectChanges();
+    } catch {}
+  }
+
+  public async exitFullscreen() {
+    //
+    if (!this.isFullscreen) {
+      return;
+    }
+
+    //
+    try {
+      //
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      }
+
+      //
+      this.isFullscreen = false;
+      this.detectChanges();
+    } catch {}
+  }
+
+  public async toggleFullscreen() {
+    //
+    if (this.isFullscreen) {
+      await this.exitFullscreen();
+    } else {
+      await this.enterFullscreen();
+    }
+  }
+  //#endregion
+
   //
   //#region Private ...
   //
@@ -94,7 +167,7 @@ export class XCardComponent extends XCardContainerComponent {
     //
     // Handle Action Provider ...
     this.ACTION_PROVIDER_SUBSCRIPTION = this.applyTakeUntilWrapper(
-      this.actionProvider.asObservable()
+      this.actionProvider.asObservable(),
     ).subscribe(async (model) => {
       //
       if (!model) {
@@ -107,6 +180,21 @@ export class XCardComponent extends XCardContainerComponent {
         case XCardAction.Refresh:
           this.detectChanges();
           break;
+
+        //
+        case XCardAction.EnterFullScreen:
+          await this.enterFullscreen();
+          break;
+
+        //
+        case XCardAction.ExitFullScreen:
+          await this.exitFullscreen();
+          break;
+
+        //
+        case XCardAction.ToggleFullScreen:
+          await this.toggleFullscreen();
+          break;
       }
     });
   }
@@ -122,5 +210,14 @@ export class XCardComponent extends XCardContainerComponent {
     this.ACTION_PROVIDER_SUBSCRIPTION = null;
   }
   //#endregion
+
+  private canUseFullscreen(): boolean {
+    return !!(
+      document.fullscreenEnabled ||
+      (document as any).webkitFullscreenEnabled ||
+      (document as any).mozFullScreenEnabled ||
+      (document as any).msFullscreenEnabled
+    );
+  }
   //#endregion
 }

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

@@ -34,6 +34,9 @@ import { XFrameworkComponentsConfig } from '../config/x-framework-components.con
 
 export enum XCardAction {
   Refresh = 'refresh',
+  ExitFullScreen = 'exit_full_screen',
+  EnterFullScreen = 'enter_full_screen',
+  ToggleFullScreen = 'toggle_full_screen',
 }
 
 export type XCardActionIdentifier = XCardAction | string;

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

@@ -38,6 +38,7 @@ import {
   XActionBarActionFiredModel,
 } from '../x-action-bar/x-action-bar.typings';
 import { XIconNames } from '../x-icon/x-icon.typings';
+import { XCardAction } from '../x-card/x-card.typings';
 
 @Component({
   selector: 'x-chart',
@@ -670,6 +671,12 @@ export class XChartComponent extends XChartContainerComponent {
       return;
     }
 
+    //
+    this.cardActionProvider.next({ action: XCardAction.ToggleFullScreen });
+
+    //
+    return;
+
     //
     const chartWrapper = this.chartContainer.nativeElement;
     const doc = document as any;