uncomplete works on xCard Fullscreen Support ...

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

@@ -6,6 +6,7 @@
   [class.no-text]="isNoTextCard() | async"
   [class.page-card]="getValue(isInPage) | async"
   [isForeground]="getValue(foregroundColor) | async"
+  [class.fullscreen]="getValue(isFullscreen) | async"
 >
   <!-- Card Header -->
   <mat-card-header class="x-header" *ngIf="getValue(showHeader) | async">

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

@@ -1,5 +1,43 @@
 //
-@import '../theme/theme.scss';
+@import "../theme/theme.scss";
+
+:host {
+  display: block;
+  width: inherit;
+  height: inherit;
+}
+
+.x-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s ease-in-out;
+  border-radius: var(--card-border-radius, 8px);
+  overflow: hidden;
+
+  &:fullscreen {
+    border-radius: 0;
+    background-color: var(--full-screen-bg, #ffffff);
+    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 {
@@ -20,7 +58,7 @@
   @include push-auto();
   @include applyWidthHeight();
   @include m-tb($d-l);
-  @include animation('fadeInUp');
+  @include animation("fadeInUp");
 
   &.mobile {
     box-sizing: border-box;

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

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