fix card fullscreen issues, but still some issues on card background color ...

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
 }