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;