From 2a4550416341a0f3d1f0d7d8af9c47a2fe2c5472 Mon Sep 17 00:00:00 2001
From: Hadi Khazaee Asl <hadi_khazaee_asl@yahoo.com>
Date: Sat, 29 Aug 2026 01:14:08 +0330
Subject: [PATCH] uncomplete works on xCard Fullscreen Support ...

---
 .../src/lib/x-card/x-card.component.html      |  1 +
 .../src/lib/x-card/x-card.component.scss      | 42 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/projects/x-framework-components/src/lib/x-card/x-card.component.html b/projects/x-framework-components/src/lib/x-card/x-card.component.html
index 6d3c16f..7b2ac3f 100644
--- a/projects/x-framework-components/src/lib/x-card/x-card.component.html
+++ b/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">
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 99e932e..8be44d3 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
@@ -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;