From 921b9e09f8ab42624177659a8b967895bed82286 Mon Sep 17 00:00:00 2001
From: Hadi Khazaee Asl <hadi_khazaee_asl@yahoo.com>
Date: Sat, 29 Aug 2026 09:12:39 +0330
Subject: [PATCH] fix card fullscreen issues, but still some issues on card
 background color ...

---
 .../src/lib/x-card/x-card.component.scss      |  3 +-
 .../src/lib/x-card/x-card.component.ts        | 41 +++++++++++++++++--
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/projects/x-framework-components/src/lib/x-card/x-card.component.scss b/projects/x-framework-components/src/lib/x-card/x-card.component.scss
index 8be44d3..6bb6c77 100644
--- a/projects/x-framework-components/src/lib/x-card/x-card.component.scss
+++ b/projects/x-framework-components/src/lib/x-card/x-card.component.scss
@@ -19,7 +19,6 @@
 
   &:fullscreen {
     border-radius: 0;
-    background-color: var(--full-screen-bg, #ffffff);
     width: 100vw;
     height: 100vh;
 
@@ -54,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);
diff --git a/projects/x-framework-components/src/lib/x-card/x-card.component.ts b/projects/x-framework-components/src/lib/x-card/x-card.component.ts
index c62012c..c70c8a1 100644
--- a/projects/x-framework-components/src/lib/x-card/x-card.component.ts
+++ b/projects/x-framework-components/src/lib/x-card/x-card.component.ts
@@ -22,7 +22,7 @@ export class XCardComponent extends XCardContainerComponent {
   private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
 
   //
-  // Full Screen ...
+  //#region Full Screen ...
   private IS_FULLSCREEN: boolean = false;
   public set isFullscreen(v: boolean) {
     //
@@ -35,9 +35,21 @@ export class XCardComponent extends XCardContainerComponent {
     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);
 
@@ -58,6 +70,12 @@ 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() {
@@ -119,7 +137,7 @@ export class XCardComponent extends XCardContainerComponent {
       //
       this.isFullscreen = true;
       this.detectChanges();
-    } catch {}
+    } catch { }
   }
 
   public async exitFullscreen() {
@@ -138,7 +156,7 @@ export class XCardComponent extends XCardContainerComponent {
       //
       this.isFullscreen = false;
       this.detectChanges();
-    } catch {}
+    } catch { }
   }
 
   public async toggleFullscreen() {
@@ -211,6 +229,22 @@ export class XCardComponent extends XCardContainerComponent {
   }
   //#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 ||
@@ -220,4 +254,5 @@ export class XCardComponent extends XCardContainerComponent {
     );
   }
   //#endregion
+  //#endregion
 }