apply card component changes side affects ...

projects/x-framework-components/src/lib/classes/i-x-card-empty.container.ts

@@ -89,6 +89,18 @@ export class XCardEmptyContainer
     this.cardPropertyProvider.cardSubTitle;
   readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.cardPropertyProvider.cardCssClass;
+
+  //
+  readonly cardShowFullScreenButton: XStandardType<boolean> =
+    this.cardPropertyProvider.cardShowFullScreenButton;
+  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
+  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
+  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
+  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -181,6 +193,27 @@ export class XCardEmptyContainerComponent
   @Input()
   cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.propertyProvider.cardCssClass;
+
+  //
+  @Input()
+  cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+
+  @Input()
+  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+
+  @Input()
+  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+
+  @Input()
+  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+
+  @Input()
+  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -296,6 +329,31 @@ export class XCardEmptyContainerComponent
       cardSubTitle: this.getValue(
         container ? container.cardSubTitle : this.cardSubTitle
       ),
+      cardShowFullScreenButton: this.getValue(
+        container
+          ? container.cardShowFullScreenButton
+          : this.cardShowFullScreenButton,
+      ),
+      cardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonIcon
+          : this.cardEnterFullScreenButtonIcon,
+      ),
+      cardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonColor
+          : this.cardEnterFullScreenButtonColor,
+      ),
+      cardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonIcon
+          : this.cardExitFullScreenButtonIcon,
+      ),
+      cardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonColor
+          : this.cardExitFullScreenButtonColor,
+      ),
       //#endregion
 
       //
@@ -402,6 +460,16 @@ export class XCardActionBarContainer extends XBaseContainer implements IXCardAct
     this.cardPropertyProvider.cardShowFooter;
   readonly cardShowActions: XStandardType<boolean> =
     this.cardPropertyProvider.cardShowActions;
+  readonly cardShowFullScreenButton: XStandardType<boolean> =
+    this.cardPropertyProvider.cardShowFullScreenButton;
+  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
+  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
+  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
+  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -480,6 +548,27 @@ export class XCardActionBarContainerComponent
   @Input()
   cardActionProvider: Subject<XCardActionModel> =
     this.propertyProvider.cardActionProvider;
+
+  //
+  @Input()
+  cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+
+  @Input()
+  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+
+  @Input()
+  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+
+  @Input()
+  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+
+  @Input()
+  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -568,6 +657,31 @@ export class XCardActionBarContainerComponent
       cardSubTitle: this.getValue(
         container ? container.cardSubTitle : this.cardSubTitle
       ),
+      cardShowFullScreenButton: this.getValue(
+        container
+          ? container.cardShowFullScreenButton
+          : this.cardShowFullScreenButton,
+      ),
+      cardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonIcon
+          : this.cardEnterFullScreenButtonIcon,
+      ),
+      cardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonColor
+          : this.cardEnterFullScreenButtonColor,
+      ),
+      cardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonIcon
+          : this.cardExitFullScreenButtonIcon,
+      ),
+      cardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonColor
+          : this.cardExitFullScreenButtonColor,
+      ),
       //#endregion
 
       //

projects/x-framework-components/src/lib/classes/i-x-file.container.ts

@@ -48,9 +48,7 @@ export interface IXMaxAllowedFilesContainer {
 @Injectable({
   providedIn: 'root',
 })
-export class XMaxAllowedFilesContainer
+export class XMaxAllowedFilesContainer implements Readonly<IXMaxAllowedFilesContainer> {
-  implements Readonly<IXMaxAllowedFilesContainer>
-{
   //
   //#region Props ...
   readonly maxAllowedFiles: XStandardType<number> = this.config.maxUploadFiles;
@@ -63,7 +61,7 @@ export class XMaxAllowedFilesContainer
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig
+    private config: XFrameworkComponentsConfig,
   ) {}
   //#endregion
 }
@@ -79,9 +77,7 @@ export interface IXMaxAllowedSizeContainer {
 @Injectable({
   providedIn: 'root',
 })
-export class XMaxAllowedSizeContainer
+export class XMaxAllowedSizeContainer implements Readonly<IXMaxAllowedSizeContainer> {
-  implements Readonly<IXMaxAllowedSizeContainer>
-{
   //
   //#region Props ...
   readonly maxAllowedSize: XStandardType<number> = this.config.maxAllowedSize;
@@ -94,7 +90,7 @@ export class XMaxAllowedSizeContainer
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig
+    private config: XFrameworkComponentsConfig,
   ) {}
   //#endregion
 }
@@ -110,9 +106,7 @@ export interface IXMinAllowedFileSizeContainer {
 @Injectable({
   providedIn: 'root',
 })
-export class XMinAllowedFileSizeContainer
+export class XMinAllowedFileSizeContainer implements Readonly<IXMinAllowedFileSizeContainer> {
-  implements Readonly<IXMinAllowedFileSizeContainer>
-{
   //
   //#region Props ...
   readonly minAllowedFileSize: XStandardType<number> =
@@ -126,7 +120,7 @@ export class XMinAllowedFileSizeContainer
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig
+    private config: XFrameworkComponentsConfig,
   ) {}
   //#endregion
 }
@@ -142,9 +136,7 @@ export interface IXMaxAllowedFileSizeContainer {
 @Injectable({
   providedIn: 'root',
 })
-export class XMaxAllowedFileSizeContainer
+export class XMaxAllowedFileSizeContainer implements Readonly<IXMaxAllowedFileSizeContainer> {
-  implements Readonly<IXMaxAllowedFileSizeContainer>
-{
   //
   //#region Props ...
   readonly maxAllowedFileSize: XStandardType<number> =
@@ -158,7 +150,7 @@ export class XMaxAllowedFileSizeContainer
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig
+    private config: XFrameworkComponentsConfig,
   ) {}
   //#endregion
 }
@@ -191,7 +183,7 @@ export class XFileRegularContainer implements Readonly<IXFileRegularContainer> {
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig
+    private config: XFrameworkComponentsConfig,
   ) {}
   //#endregion
 }
@@ -254,7 +246,7 @@ export class XFileContainer implements Readonly<IXFileContainer> {
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig
+    private config: XFrameworkComponentsConfig,
   ) {}
   //#endregion
 }
@@ -267,9 +259,9 @@ export class XFileContainer implements Readonly<IXFileContainer> {
 })
 @Component({
   template: `
-    <!-- 
+    <!--
         <ng-container *ngIf="extractProps() | async as props">
-        </ng-container> 
+        </ng-container>
     -->
   `,
 })
@@ -339,7 +331,7 @@ export abstract class XFileContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XFileContainer
+    protected propertyProvider: XFileContainer,
   ) {
     super(
       config,
@@ -348,7 +340,7 @@ export abstract class XFileContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -356,52 +348,52 @@ export abstract class XFileContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXFileContainer
+    container?: IXFileContainer,
   ): Observable<IXFileContainer> {
     return forkJoin({
       //
       emptyFileException: this.getValue(
-        container ? container.emptyFileException : this.emptyFileException
+        container ? container.emptyFileException : this.emptyFileException,
       ),
       notAllowedFileException: this.getValue(
         container
           ? container.notAllowedFileException
-          : this.notAllowedFileException
+          : this.notAllowedFileException,
       ),
       allowedExtensions: this.getValue(
-        container ? container.allowedExtensions : this.allowedExtensions
+        container ? container.allowedExtensions : this.allowedExtensions,
       ),
       maxAllowedFiles: this.getValue(
-        container ? container.maxAllowedFiles : this.maxAllowedFiles
+        container ? container.maxAllowedFiles : this.maxAllowedFiles,
       ),
       maxAllowedFilesException: this.getValue(
         container
           ? container.maxAllowedFilesException
-          : this.maxAllowedFilesException
+          : this.maxAllowedFilesException,
       ),
       maxAllowedSize: this.getValue(
-        container ? container.maxAllowedSize : this.maxAllowedSize
+        container ? container.maxAllowedSize : this.maxAllowedSize,
       ),
       maxAllowedSizeException: this.getValue(
         container
           ? container.maxAllowedSizeException
-          : this.maxAllowedSizeException
+          : this.maxAllowedSizeException,
       ),
       minAllowedFileSize: this.getValue(
-        container ? container.minAllowedFileSize : this.minAllowedFileSize
+        container ? container.minAllowedFileSize : this.minAllowedFileSize,
       ),
       minAllowedFileSizeException: this.getValue(
         container
           ? container.minAllowedFileSizeException
-          : this.minAllowedFileSizeException
+          : this.minAllowedFileSizeException,
       ),
       maxAllowedFileSize: this.getValue(
-        container ? container.maxAllowedFileSize : this.maxAllowedFileSize
+        container ? container.maxAllowedFileSize : this.maxAllowedFileSize,
       ),
       maxAllowedFileSizeException: this.getValue(
         container
           ? container.maxAllowedFileSizeException
-          : this.maxAllowedFileSizeException
+          : this.maxAllowedFileSizeException,
       ),
     }).pipe(
       map((data) => {
@@ -411,7 +403,7 @@ export abstract class XFileContainerComponent
 
           //
         };
-      })
+      }),
     );
   }
   //#endregion
@@ -454,6 +446,16 @@ export class XCardFileContainer
     this.cardPropertyProvider.cardSubTitle;
   readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.cardPropertyProvider.cardCssClass;
+  readonly cardShowFullScreenButton: XStandardType<boolean> =
+    this.cardPropertyProvider.cardShowFullScreenButton;
+  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
+  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
+  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
+  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -501,7 +503,7 @@ export class XCardFileContainer
   //#region Constructor ...
   constructor(
     protected cardPropertyProvider: XComponentCardContainer,
-    protected filePropertyProvider: XFileContainer
+    protected filePropertyProvider: XFileContainer,
   ) {
     super();
   }
@@ -556,6 +558,26 @@ export class XCardFileContainerComponent
   @Input()
   cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.propertyProvider.cardCssClass;
+
+  @Input()
+  cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+
+  @Input()
+  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+
+  @Input()
+  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+
+  @Input()
+  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+
+  @Input()
+  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -621,7 +643,7 @@ export class XCardFileContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardFileContainer
+    protected propertyProvider: XCardFileContainer,
   ) {
     super(
       config,
@@ -630,7 +652,7 @@ export class XCardFileContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -638,82 +660,107 @@ export class XCardFileContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXCardFileContainer
+    container?: IXCardFileContainer,
   ): Observable<IXCardFileContainer> {
     return forkJoin({
       //
       //#region XComponentCard ...
       cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass
+        container ? container.cardCssClass : this.cardCssClass,
       ),
       isInPage: this.getValue(container ? container.isInPage : this.isInPage),
       wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard
+        container ? container.wrapWithCard : this.wrapWithCard,
       ),
       cardShowFooter: this.getValue(
-        container ? container.cardShowFooter : this.cardShowFooter
+        container ? container.cardShowFooter : this.cardShowFooter,
       ),
       cardShowActions: this.getValue(
-        container ? container.cardShowActions : this.cardShowActions
+        container ? container.cardShowActions : this.cardShowActions,
       ),
       cardColor: this.getValue(
-        container ? container.cardColor : this.cardColor
+        container ? container.cardColor : this.cardColor,
       ),
       cardForegroundColor: this.getValue(
-        container ? container.cardForegroundColor : this.cardForegroundColor
+        container ? container.cardForegroundColor : this.cardForegroundColor,
       ),
       cardTitle: this.getValue(
-        container ? container.cardTitle : this.cardTitle
+        container ? container.cardTitle : this.cardTitle,
       ),
       cardSubTitle: this.getValue(
-        container ? container.cardSubTitle : this.cardSubTitle
+        container ? container.cardSubTitle : this.cardSubTitle,
+      ),
+      cardShowFullScreenButton: this.getValue(
+        container
+          ? container.cardShowFullScreenButton
+          : this.cardShowFullScreenButton,
+      ),
+      cardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonIcon
+          : this.cardEnterFullScreenButtonIcon,
+      ),
+      cardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonColor
+          : this.cardEnterFullScreenButtonColor,
+      ),
+      cardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonIcon
+          : this.cardExitFullScreenButtonIcon,
+      ),
+      cardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonColor
+          : this.cardExitFullScreenButtonColor,
       ),
       //#endregion
 
       //
       //#region File ...
       emptyFileException: this.getValue(
-        container ? container.emptyFileException : this.emptyFileException
+        container ? container.emptyFileException : this.emptyFileException,
       ),
       notAllowedFileException: this.getValue(
         container
           ? container.notAllowedFileException
-          : this.notAllowedFileException
+          : this.notAllowedFileException,
       ),
       allowedExtensions: this.getValue(
-        container ? container.allowedExtensions : this.allowedExtensions
+        container ? container.allowedExtensions : this.allowedExtensions,
       ),
       maxAllowedFiles: this.getValue(
-        container ? container.maxAllowedFiles : this.maxAllowedFiles
+        container ? container.maxAllowedFiles : this.maxAllowedFiles,
       ),
       maxAllowedFilesException: this.getValue(
         container
           ? container.maxAllowedFilesException
-          : this.maxAllowedFilesException
+          : this.maxAllowedFilesException,
       ),
       maxAllowedSize: this.getValue(
-        container ? container.maxAllowedSize : this.maxAllowedSize
+        container ? container.maxAllowedSize : this.maxAllowedSize,
       ),
       maxAllowedSizeException: this.getValue(
         container
           ? container.maxAllowedSizeException
-          : this.maxAllowedSizeException
+          : this.maxAllowedSizeException,
       ),
       minAllowedFileSize: this.getValue(
-        container ? container.minAllowedFileSize : this.minAllowedFileSize
+        container ? container.minAllowedFileSize : this.minAllowedFileSize,
       ),
       minAllowedFileSizeException: this.getValue(
         container
           ? container.minAllowedFileSizeException
-          : this.minAllowedFileSizeException
+          : this.minAllowedFileSizeException,
       ),
       maxAllowedFileSize: this.getValue(
-        container ? container.maxAllowedFileSize : this.maxAllowedFileSize
+        container ? container.maxAllowedFileSize : this.maxAllowedFileSize,
       ),
       maxAllowedFileSizeException: this.getValue(
         container
           ? container.maxAllowedFileSizeException
-          : this.maxAllowedFileSizeException
+          : this.maxAllowedFileSizeException,
       ),
       //#endregion
     }).pipe(
@@ -727,7 +774,7 @@ export class XCardFileContainerComponent
             ? container.cardActionProvider
             : this.cardActionProvider,
         };
-      })
+      }),
     );
   }
   //#endregion
@@ -740,8 +787,7 @@ export class XCardFileContainerComponent
 type TXCardFileFileDropContainer = IXComponentCardContainer &
   IXFileContainer &
   IXComponentFileDropAreaContainer;
-export interface IXCardFileFileDropContainer
+export interface IXCardFileFileDropContainer extends TXCardFileFileDropContainer {}
-  extends TXCardFileFileDropContainer {}
 
 //
 @Injectable({
@@ -775,6 +821,16 @@ export class XCardFileFileDropContainer
     this.cardPropertyProvider.cardSubTitle;
   readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.cardPropertyProvider.cardCssClass;
+  readonly cardShowFullScreenButton: XStandardType<boolean> =
+    this.cardPropertyProvider.cardShowFullScreenButton;
+  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
+  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
+  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
+  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -899,6 +955,16 @@ export class XCardFileFileDropContainer
     this.fileDropPropertyProvider.fileDropAreaCardSubTitle;
   readonly fileDropAreaCardCssClass: XStandardType<XOneOrManyType<string>> =
     this.fileDropPropertyProvider.fileDropAreaCardCssClass;
+  readonly fileDropAreaCardShowFullScreenButton: XStandardType<boolean> =
+    this.fileDropPropertyProvider.fileDropAreaCardShowFullScreenButton;
+  readonly fileDropAreaCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.fileDropPropertyProvider.fileDropAreaCardEnterFullScreenButtonIcon;
+  readonly fileDropAreaCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.fileDropPropertyProvider.fileDropAreaCardEnterFullScreenButtonColor;
+  readonly fileDropAreaCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.fileDropPropertyProvider.fileDropAreaCardExitFullScreenButtonIcon;
+  readonly fileDropAreaCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.fileDropPropertyProvider.fileDropAreaCardExitFullScreenButtonColor;
   //#endregion
   //#endregion
   //#endregion
@@ -908,7 +974,7 @@ export class XCardFileFileDropContainer
   constructor(
     protected cardPropertyProvider: XComponentCardContainer,
     protected fileDropPropertyProvider: XComponentFileDropAreaContainer,
-    protected filePropertyProvider: XFileContainer
+    protected filePropertyProvider: XFileContainer,
   ) {
     super();
   }
@@ -963,6 +1029,26 @@ export class XCardFileFileDropContainerComponent
   @Input()
   cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.propertyProvider.cardCssClass;
+
+  @Input()
+  cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+
+  @Input()
+  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+
+  @Input()
+  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+
+  @Input()
+  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+
+  @Input()
+  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -1131,6 +1217,26 @@ export class XCardFileFileDropContainerComponent
   @Input()
   fileDropAreaCardCssClass: XStandardType<XOneOrManyType<string>> =
     this.propertyProvider.fileDropAreaCardCssClass;
+
+  @Input()
+  fileDropAreaCardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.fileDropAreaCardShowFullScreenButton;
+
+  @Input()
+  fileDropAreaCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.fileDropAreaCardEnterFullScreenButtonIcon;
+
+  @Input()
+  fileDropAreaCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.fileDropAreaCardEnterFullScreenButtonColor;
+
+  @Input()
+  fileDropAreaCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.fileDropAreaCardExitFullScreenButtonIcon;
+
+  @Input()
+  fileDropAreaCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.fileDropAreaCardExitFullScreenButtonColor;
   //#endregion
   //#endregion
   //#endregion
@@ -1146,7 +1252,7 @@ export class XCardFileFileDropContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardFileFileDropContainer
+    protected propertyProvider: XCardFileFileDropContainer,
   ) {
     super(
       config,
@@ -1155,7 +1261,7 @@ export class XCardFileFileDropContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -1163,82 +1269,107 @@ export class XCardFileFileDropContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXCardFileFileDropContainer
+    container?: IXCardFileFileDropContainer,
   ): Observable<IXCardFileFileDropContainer> {
     return forkJoin({
       //
       //#region XComponentCard ...
       cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass
+        container ? container.cardCssClass : this.cardCssClass,
       ),
       isInPage: this.getValue(container ? container.isInPage : this.isInPage),
       wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard
+        container ? container.wrapWithCard : this.wrapWithCard,
       ),
       cardShowFooter: this.getValue(
-        container ? container.cardShowFooter : this.cardShowFooter
+        container ? container.cardShowFooter : this.cardShowFooter,
       ),
       cardShowActions: this.getValue(
-        container ? container.cardShowActions : this.cardShowActions
+        container ? container.cardShowActions : this.cardShowActions,
       ),
       cardColor: this.getValue(
-        container ? container.cardColor : this.cardColor
+        container ? container.cardColor : this.cardColor,
       ),
       cardForegroundColor: this.getValue(
-        container ? container.cardForegroundColor : this.cardForegroundColor
+        container ? container.cardForegroundColor : this.cardForegroundColor,
       ),
       cardTitle: this.getValue(
-        container ? container.cardTitle : this.cardTitle
+        container ? container.cardTitle : this.cardTitle,
       ),
       cardSubTitle: this.getValue(
-        container ? container.cardSubTitle : this.cardSubTitle
+        container ? container.cardSubTitle : this.cardSubTitle,
+      ),
+      cardShowFullScreenButton: this.getValue(
+        container
+          ? container.cardShowFullScreenButton
+          : this.cardShowFullScreenButton,
+      ),
+      cardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonIcon
+          : this.cardEnterFullScreenButtonIcon,
+      ),
+      cardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonColor
+          : this.cardEnterFullScreenButtonColor,
+      ),
+      cardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonIcon
+          : this.cardExitFullScreenButtonIcon,
+      ),
+      cardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonColor
+          : this.cardExitFullScreenButtonColor,
       ),
       //#endregion
 
       //
       //#region File ...
       emptyFileException: this.getValue(
-        container ? container.emptyFileException : this.emptyFileException
+        container ? container.emptyFileException : this.emptyFileException,
       ),
       notAllowedFileException: this.getValue(
         container
           ? container.notAllowedFileException
-          : this.notAllowedFileException
+          : this.notAllowedFileException,
       ),
       allowedExtensions: this.getValue(
-        container ? container.allowedExtensions : this.allowedExtensions
+        container ? container.allowedExtensions : this.allowedExtensions,
       ),
       maxAllowedFiles: this.getValue(
-        container ? container.maxAllowedFiles : this.maxAllowedFiles
+        container ? container.maxAllowedFiles : this.maxAllowedFiles,
       ),
       maxAllowedFilesException: this.getValue(
         container
           ? container.maxAllowedFilesException
-          : this.maxAllowedFilesException
+          : this.maxAllowedFilesException,
       ),
       maxAllowedSize: this.getValue(
-        container ? container.maxAllowedSize : this.maxAllowedSize
+        container ? container.maxAllowedSize : this.maxAllowedSize,
       ),
       maxAllowedSizeException: this.getValue(
         container
           ? container.maxAllowedSizeException
-          : this.maxAllowedSizeException
+          : this.maxAllowedSizeException,
       ),
       minAllowedFileSize: this.getValue(
-        container ? container.minAllowedFileSize : this.minAllowedFileSize
+        container ? container.minAllowedFileSize : this.minAllowedFileSize,
       ),
       minAllowedFileSizeException: this.getValue(
         container
           ? container.minAllowedFileSizeException
-          : this.minAllowedFileSizeException
+          : this.minAllowedFileSizeException,
       ),
       maxAllowedFileSize: this.getValue(
-        container ? container.maxAllowedFileSize : this.maxAllowedFileSize
+        container ? container.maxAllowedFileSize : this.maxAllowedFileSize,
       ),
       maxAllowedFileSizeException: this.getValue(
         container
           ? container.maxAllowedFileSizeException
-          : this.maxAllowedFileSizeException
+          : this.maxAllowedFileSizeException,
       ),
       //#endregion
 
@@ -1246,103 +1377,132 @@ export class XCardFileFileDropContainerComponent
       //#region FileDrop ...
       //
       fileDropAreaCssClass: this.getValue(
-        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass
+        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass,
       ),
       fileDropAreaColor: this.getValue(
-        container ? container.fileDropAreaColor : this.fileDropAreaColor
+        container ? container.fileDropAreaColor : this.fileDropAreaColor,
       ),
       fileDropAreaForegroundColor: this.getValue(
         container
           ? container.fileDropAreaForegroundColor
-          : this.fileDropAreaForegroundColor
+          : this.fileDropAreaForegroundColor,
       ),
       fileDropAreaIcon: this.getValue(
-        container ? container.fileDropAreaIcon : this.fileDropAreaIcon
+        container ? container.fileDropAreaIcon : this.fileDropAreaIcon,
       ),
       fileDropAreaMessage: this.getValue(
-        container ? container.fileDropAreaMessage : this.fileDropAreaMessage
+        container ? container.fileDropAreaMessage : this.fileDropAreaMessage,
       ),
       fileDropAreaDisableFileCheck: this.getValue(
         container
           ? container.fileDropAreaDisableFileCheck
-          : this.fileDropAreaDisableFileCheck
+          : this.fileDropAreaDisableFileCheck,
       ),
       fileDropAreaSupportsMultipleFiles: this.getValue(
         container
           ? container.fileDropAreaSupportsMultipleFiles
-          : this.fileDropAreaSupportsMultipleFiles
+          : this.fileDropAreaSupportsMultipleFiles,
       ),
       fileDropAreaAllowedExtensions: this.getValue(
         container
           ? container.fileDropAreaAllowedExtensions
-          : this.fileDropAreaAllowedExtensions
+          : this.fileDropAreaAllowedExtensions,
       ),
       fileDropAreaDragDisabled: this.getValue(
         container
           ? container.fileDropAreaDragDisabled
-          : this.fileDropAreaDragDisabled
+          : this.fileDropAreaDragDisabled,
       ),
       fileDropAreaContentTemplate: this.getValue(
         container
           ? container.fileDropAreaContentTemplate
-          : this.fileDropAreaContentTemplate
+          : this.fileDropAreaContentTemplate,
       ),
       fileDropAreaSuccessColor: this.getValue(
         container
           ? container.fileDropAreaSuccessColor
-          : this.fileDropAreaSuccessColor
+          : this.fileDropAreaSuccessColor,
       ),
       fileDropAreaErrorColor: this.getValue(
         container
           ? container.fileDropAreaErrorColor
-          : this.fileDropAreaErrorColor
+          : this.fileDropAreaErrorColor,
       ),
       fileDropAreaAccentColor: this.getValue(
         container
           ? container.fileDropAreaAccentColor
-          : this.fileDropAreaAccentColor
+          : this.fileDropAreaAccentColor,
       ),
       showFileDropArea: this.getValue(
-        container ? container.showFileDropArea : this.showFileDropArea
+        container ? container.showFileDropArea : this.showFileDropArea,
       ),
       fileDropAreaIsInPage: this.getValue(
-        container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage
+        container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage,
       ),
       fileDropAreaWrapWithCard: this.getValue(
         container
           ? container.fileDropAreaWrapWithCard
-          : this.fileDropAreaWrapWithCard
+          : this.fileDropAreaWrapWithCard,
       ),
       fileDropAreaCardShowFooter: this.getValue(
         container
           ? container.fileDropAreaCardShowFooter
-          : this.fileDropAreaCardShowFooter
+          : this.fileDropAreaCardShowFooter,
       ),
       fileDropAreaCardShowActions: this.getValue(
         container
           ? container.fileDropAreaCardShowActions
-          : this.fileDropAreaCardShowActions
+          : this.fileDropAreaCardShowActions,
       ),
       fileDropAreaCardColor: this.getValue(
-        container ? container.fileDropAreaCardColor : this.fileDropAreaCardColor
+        container
+          ? container.fileDropAreaCardColor
+          : this.fileDropAreaCardColor,
       ),
       fileDropAreaCardForegroundColor: this.getValue(
         container
           ? container.fileDropAreaCardForegroundColor
-          : this.fileDropAreaCardForegroundColor
+          : this.fileDropAreaCardForegroundColor,
       ),
       fileDropAreaCardTitle: this.getValue(
-        container ? container.fileDropAreaCardTitle : this.fileDropAreaCardTitle
+        container
+          ? container.fileDropAreaCardTitle
+          : this.fileDropAreaCardTitle,
       ),
       fileDropAreaCardSubTitle: this.getValue(
         container
           ? container.fileDropAreaCardSubTitle
-          : this.fileDropAreaCardSubTitle
+          : this.fileDropAreaCardSubTitle,
       ),
       fileDropAreaCardCssClass: this.getValue(
         container
           ? container.fileDropAreaCardCssClass
-          : this.fileDropAreaCardCssClass
+          : this.fileDropAreaCardCssClass,
+      ),
+      fileDropAreaCardShowFullScreenButton: this.getValue(
+        container
+          ? container.fileDropAreaCardShowFullScreenButton
+          : this.fileDropAreaCardShowFullScreenButton,
+      ),
+      fileDropAreaCardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.fileDropAreaCardEnterFullScreenButtonIcon
+          : this.fileDropAreaCardEnterFullScreenButtonIcon,
+      ),
+      fileDropAreaCardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.fileDropAreaCardEnterFullScreenButtonColor
+          : this.fileDropAreaCardEnterFullScreenButtonColor,
+      ),
+      fileDropAreaCardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.fileDropAreaCardExitFullScreenButtonIcon
+          : this.fileDropAreaCardExitFullScreenButtonIcon,
+      ),
+      fileDropAreaCardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.fileDropAreaCardExitFullScreenButtonColor
+          : this.fileDropAreaCardExitFullScreenButtonColor,
       ),
       //#endregion
     }).pipe(
@@ -1369,7 +1529,7 @@ export class XCardFileFileDropContainerComponent
           //
           fileDropAreaFilesChangeEmiter: this.fileDropAreaFilesChangeEmiter,
         };
-      })
+      }),
     );
   }
   //#endregion

projects/x-framework-components/src/lib/classes/i-x-next-prev-reset.container.ts

@@ -32,6 +32,7 @@ import { map } from 'rxjs/operators';
 import { Observable, forkJoin, Subject } from 'rxjs';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import { XManagerService } from 'x-framework-services';
+import { XIconIdentifier } from '../x-icon/x-icon.typings';
 import { IXButtonContainer, XButtonType } from '../x-button/x-button.typings';
 import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
 import { XSlotNameIdentifier, XSlotName } from '../x-slotter/x-slotter.typings';
@@ -274,7 +275,7 @@ export abstract class XNextPrevResetHostContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XNextPrevResetHostContainer
+    protected propertyProvider: XNextPrevResetHostContainer,
   ) {
     super(
       config,
@@ -283,7 +284,7 @@ export abstract class XNextPrevResetHostContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -291,7 +292,7 @@ export abstract class XNextPrevResetHostContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXNextPrevResetHostContainer
+    container?: IXNextPrevResetHostContainer,
   ): Observable<IXNextPrevResetHostContainer> {
     return forkJoin({
       //
@@ -309,7 +310,7 @@ export abstract class XNextPrevResetHostContainerComponent
           onPrev: this.onPrev,
           onReset: this.onReset,
         };
-      })
+      }),
     );
   }
   //#endregion
@@ -321,8 +322,7 @@ export abstract class XNextPrevResetHostContainerComponent
 //
 type TXCardEmptyContainer = IXComponentCardContainer &
   IXNextPrevResetHostContainer;
-export interface IXCardNextPrevResetHostContainer
+export interface IXCardNextPrevResetHostContainer extends TXCardEmptyContainer {}
-  extends TXCardEmptyContainer {}
 
 //
 @Injectable({
@@ -356,6 +356,16 @@ export class XCardNextPrevResetHostContainer
     this.cardPropertyProvider.cardSubTitle;
   readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.cardPropertyProvider.cardCssClass;
+  readonly cardShowFullScreenButton: XStandardType<boolean> =
+    this.cardPropertyProvider.cardShowFullScreenButton;
+  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
+  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
+  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
+  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -390,7 +400,7 @@ export class XCardNextPrevResetHostContainer
   //#region Constructor ...
   constructor(
     protected cardPropertyProvider: XComponentCardContainer,
-    protected nextPrevResetHostPropertyProvider: XNextPrevResetHostContainer
+    protected nextPrevResetHostPropertyProvider: XNextPrevResetHostContainer,
   ) {
     super();
   }
@@ -445,6 +455,26 @@ export class XCardNextPrevResetHostContainerComponent
   @Input()
   cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.propertyProvider.cardCssClass;
+
+  @Input()
+  cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+
+  @Input()
+  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+
+  @Input()
+  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+
+  @Input()
+  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+
+  @Input()
+  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -489,7 +519,7 @@ export class XCardNextPrevResetHostContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardNextPrevResetHostContainer
+    protected propertyProvider: XCardNextPrevResetHostContainer,
   ) {
     super(
       config,
@@ -498,7 +528,7 @@ export class XCardNextPrevResetHostContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -506,35 +536,60 @@ export class XCardNextPrevResetHostContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXCardNextPrevResetHostContainer
+    container?: IXCardNextPrevResetHostContainer,
   ): Observable<IXCardNextPrevResetHostContainer> {
     return forkJoin({
       //
       //#region XComponentCard ...
       cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass
+        container ? container.cardCssClass : this.cardCssClass,
       ),
       isInPage: this.getValue(container ? container.isInPage : this.isInPage),
       wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard
+        container ? container.wrapWithCard : this.wrapWithCard,
       ),
       cardShowFooter: this.getValue(
-        container ? container.cardShowFooter : this.cardShowFooter
+        container ? container.cardShowFooter : this.cardShowFooter,
       ),
       cardShowActions: this.getValue(
-        container ? container.cardShowActions : this.cardShowActions
+        container ? container.cardShowActions : this.cardShowActions,
       ),
       cardColor: this.getValue(
-        container ? container.cardColor : this.cardColor
+        container ? container.cardColor : this.cardColor,
       ),
       cardForegroundColor: this.getValue(
-        container ? container.cardForegroundColor : this.cardForegroundColor
+        container ? container.cardForegroundColor : this.cardForegroundColor,
       ),
       cardTitle: this.getValue(
-        container ? container.cardTitle : this.cardTitle
+        container ? container.cardTitle : this.cardTitle,
       ),
       cardSubTitle: this.getValue(
-        container ? container.cardSubTitle : this.cardSubTitle
+        container ? container.cardSubTitle : this.cardSubTitle,
+      ),
+      cardShowFullScreenButton: this.getValue(
+        container
+          ? container.cardShowFullScreenButton
+          : this.cardShowFullScreenButton,
+      ),
+      cardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonIcon
+          : this.cardEnterFullScreenButtonIcon,
+      ),
+      cardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonColor
+          : this.cardEnterFullScreenButtonColor,
+      ),
+      cardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonIcon
+          : this.cardExitFullScreenButtonIcon,
+      ),
+      cardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonColor
+          : this.cardExitFullScreenButtonColor,
       ),
       //#endregion
 
@@ -561,7 +616,7 @@ export class XCardNextPrevResetHostContainerComponent
           onPrev: this.onPrev,
           onReset: this.onReset,
         };
-      })
+      }),
     );
   }
   //#endregion
@@ -576,8 +631,7 @@ type TXNextPrevResetContainer = IXNextContainer &
   IXResetContainer;
 // tslint:disable-next-line:no-empty-interface
 export interface IXNextPrevResetContainer
-  extends IXBaseContainer,
+  extends IXBaseContainer, TXNextPrevResetContainer {}
-    TXNextPrevResetContainer {}
 
 @Injectable({
   providedIn: 'root',
@@ -637,7 +691,7 @@ export class XNextPrevResetContainer
   constructor(
     protected prevPropertyProvider: XPrevContainer,
     protected nextPropertyProvider: XNextContainer,
-    protected resetpropertyProvider: XResetContainer
+    protected resetpropertyProvider: XResetContainer,
   ) {
     super();
   }
@@ -741,7 +795,7 @@ export abstract class XNextPrevResetContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XNextPrevResetContainer
+    protected propertyProvider: XNextPrevResetContainer,
   ) {
     super(
       config,
@@ -750,7 +804,7 @@ export abstract class XNextPrevResetContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -758,57 +812,57 @@ export abstract class XNextPrevResetContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXNextPrevResetContainer
+    container?: IXNextPrevResetContainer,
   ): Observable<IXNextPrevResetContainer> {
     return forkJoin({
       //
       hasNext: this.getValue(container ? container.hasNext : this.hasNext),
       disableNext: this.getValue(
-        container ? container.disableNext : this.disableNext
+        container ? container.disableNext : this.disableNext,
       ),
       nextConfirmer: this.getValue(
-        container ? container.nextConfirmer : this.nextConfirmer
+        container ? container.nextConfirmer : this.nextConfirmer,
       ),
       nextPosition: this.getValue(
-        container ? container.nextPosition : this.nextPosition
+        container ? container.nextPosition : this.nextPosition,
       ),
       nextCssClass: this.getValue(
-        container ? container.nextCssClass : this.nextCssClass
+        container ? container.nextCssClass : this.nextCssClass,
       ),
       nextButton: this.getValue(
-        container ? container.nextButton : this.nextButton
+        container ? container.nextButton : this.nextButton,
       ),
       hasPrev: this.getValue(container ? container.hasPrev : this.hasPrev),
       disablePrev: this.getValue(
-        container ? container.disablePrev : this.disablePrev
+        container ? container.disablePrev : this.disablePrev,
       ),
       prevConfirmer: this.getValue(
-        container ? container.prevConfirmer : this.prevConfirmer
+        container ? container.prevConfirmer : this.prevConfirmer,
       ),
       prevPosition: this.getValue(
-        container ? container.prevPosition : this.prevPosition
+        container ? container.prevPosition : this.prevPosition,
       ),
       prevCssClass: this.getValue(
-        container ? container.prevCssClass : this.prevCssClass
+        container ? container.prevCssClass : this.prevCssClass,
       ),
       prevButton: this.getValue(
-        container ? container.prevButton : this.prevButton
+        container ? container.prevButton : this.prevButton,
       ),
       hasReset: this.getValue(container ? container.hasReset : this.hasReset),
       disableReset: this.getValue(
-        container ? container.disableReset : this.disableReset
+        container ? container.disableReset : this.disableReset,
       ),
       resetConfirmer: this.getValue(
-        container ? container.resetConfirmer : this.resetConfirmer
+        container ? container.resetConfirmer : this.resetConfirmer,
       ),
       resetPosition: this.getValue(
-        container ? container.resetPosition : this.resetPosition
+        container ? container.resetPosition : this.resetPosition,
       ),
       resetCssClass: this.getValue(
-        container ? container.resetCssClass : this.resetCssClass
+        container ? container.resetCssClass : this.resetCssClass,
       ),
       resetButton: this.getValue(
-        container ? container.resetButton : this.resetButton
+        container ? container.resetButton : this.resetButton,
       ),
     }).pipe(
       map((data) => {
@@ -818,7 +872,7 @@ export abstract class XNextPrevResetContainerComponent
 
           //
         };
-      })
+      }),
     );
   }
   //#endregion
@@ -830,8 +884,7 @@ export abstract class XNextPrevResetContainerComponent
 type TXNextPrevResetAndHostContainer = IXNextPrevResetContainer &
   IXCardNextPrevResetHostContainer;
 export interface IXNextPrevResetAndHostContainer
-  extends IXBaseContainer,
+  extends IXBaseContainer, TXNextPrevResetAndHostContainer {}
-    TXNextPrevResetAndHostContainer {}
 
 @Injectable({
   providedIn: 'root',
@@ -940,6 +993,16 @@ export class XNextPrevResetAndHostContainer
     this.cardNextPrevResetPropertyProvider.cardSubTitle;
   readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.cardNextPrevResetPropertyProvider.cardCssClass;
+  readonly cardShowFullScreenButton: XStandardType<boolean> =
+    this.cardNextPrevResetPropertyProvider.cardShowFullScreenButton;
+  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardNextPrevResetPropertyProvider.cardEnterFullScreenButtonIcon;
+  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardNextPrevResetPropertyProvider.cardEnterFullScreenButtonColor;
+  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardNextPrevResetPropertyProvider.cardExitFullScreenButtonIcon;
+  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardNextPrevResetPropertyProvider.cardExitFullScreenButtonColor;
   //#endregion
   //#endregion
 
@@ -947,7 +1010,7 @@ export class XNextPrevResetAndHostContainer
   //#region Constructor ...
   constructor(
     protected nextPrevResetPropertyProvider: XNextPrevResetContainer,
-    protected cardNextPrevResetPropertyProvider: XCardNextPrevResetHostContainer
+    protected cardNextPrevResetPropertyProvider: XCardNextPrevResetHostContainer,
   ) {
     super();
   }
@@ -1001,6 +1064,26 @@ export class XNextPrevResetAndHostContainerComponent
   @Input()
   cardCssClass: XStandardType<XOneOrManyType<string>> =
     this.propertyProvider.cardCssClass;
+
+  @Input()
+  cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+
+  @Input()
+  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+
+  @Input()
+  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+
+  @Input()
+  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+
+  @Input()
+  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -1123,7 +1206,7 @@ export class XNextPrevResetAndHostContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XNextPrevResetAndHostContainer
+    protected propertyProvider: XNextPrevResetAndHostContainer,
   ) {
     super(
       config,
@@ -1132,7 +1215,7 @@ export class XNextPrevResetAndHostContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -1140,35 +1223,60 @@ export class XNextPrevResetAndHostContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXNextPrevResetAndHostContainer
+    container?: IXNextPrevResetAndHostContainer,
   ): Observable<IXNextPrevResetAndHostContainer> {
     return forkJoin({
       //
       //#region XComponentCard ...
       cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass
+        container ? container.cardCssClass : this.cardCssClass,
       ),
       isInPage: this.getValue(container ? container.isInPage : this.isInPage),
       wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard
+        container ? container.wrapWithCard : this.wrapWithCard,
       ),
       cardShowFooter: this.getValue(
-        container ? container.cardShowFooter : this.cardShowFooter
+        container ? container.cardShowFooter : this.cardShowFooter,
       ),
       cardShowActions: this.getValue(
-        container ? container.cardShowActions : this.cardShowActions
+        container ? container.cardShowActions : this.cardShowActions,
       ),
       cardColor: this.getValue(
-        container ? container.cardColor : this.cardColor
+        container ? container.cardColor : this.cardColor,
       ),
       cardForegroundColor: this.getValue(
-        container ? container.cardForegroundColor : this.cardForegroundColor
+        container ? container.cardForegroundColor : this.cardForegroundColor,
       ),
       cardTitle: this.getValue(
-        container ? container.cardTitle : this.cardTitle
+        container ? container.cardTitle : this.cardTitle,
       ),
       cardSubTitle: this.getValue(
-        container ? container.cardSubTitle : this.cardSubTitle
+        container ? container.cardSubTitle : this.cardSubTitle,
+      ),
+      cardShowFullScreenButton: this.getValue(
+        container
+          ? container.cardShowFullScreenButton
+          : this.cardShowFullScreenButton,
+      ),
+      cardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonIcon
+          : this.cardEnterFullScreenButtonIcon,
+      ),
+      cardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonColor
+          : this.cardEnterFullScreenButtonColor,
+      ),
+      cardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonIcon
+          : this.cardExitFullScreenButtonIcon,
+      ),
+      cardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonColor
+          : this.cardExitFullScreenButtonColor,
       ),
       //#endregion
 
@@ -1185,51 +1293,51 @@ export class XNextPrevResetAndHostContainerComponent
       //
       hasNext: this.getValue(container ? container.hasNext : this.hasNext),
       disableNext: this.getValue(
-        container ? container.disableNext : this.disableNext
+        container ? container.disableNext : this.disableNext,
       ),
       nextConfirmer: this.getValue(
-        container ? container.nextConfirmer : this.nextConfirmer
+        container ? container.nextConfirmer : this.nextConfirmer,
       ),
       nextPosition: this.getValue(
-        container ? container.nextPosition : this.nextPosition
+        container ? container.nextPosition : this.nextPosition,
       ),
       nextCssClass: this.getValue(
-        container ? container.nextCssClass : this.nextCssClass
+        container ? container.nextCssClass : this.nextCssClass,
       ),
       nextButton: this.getValue(
-        container ? container.nextButton : this.nextButton
+        container ? container.nextButton : this.nextButton,
       ),
       hasPrev: this.getValue(container ? container.hasPrev : this.hasPrev),
       disablePrev: this.getValue(
-        container ? container.disablePrev : this.disablePrev
+        container ? container.disablePrev : this.disablePrev,
       ),
       prevConfirmer: this.getValue(
-        container ? container.prevConfirmer : this.prevConfirmer
+        container ? container.prevConfirmer : this.prevConfirmer,
       ),
       prevPosition: this.getValue(
-        container ? container.prevPosition : this.prevPosition
+        container ? container.prevPosition : this.prevPosition,
       ),
       prevCssClass: this.getValue(
-        container ? container.prevCssClass : this.prevCssClass
+        container ? container.prevCssClass : this.prevCssClass,
       ),
       prevButton: this.getValue(
-        container ? container.prevButton : this.prevButton
+        container ? container.prevButton : this.prevButton,
       ),
       hasReset: this.getValue(container ? container.hasReset : this.hasReset),
       disableReset: this.getValue(
-        container ? container.disableReset : this.disableReset
+        container ? container.disableReset : this.disableReset,
       ),
       resetConfirmer: this.getValue(
-        container ? container.resetConfirmer : this.resetConfirmer
+        container ? container.resetConfirmer : this.resetConfirmer,
       ),
       resetPosition: this.getValue(
-        container ? container.resetPosition : this.resetPosition
+        container ? container.resetPosition : this.resetPosition,
       ),
       resetCssClass: this.getValue(
-        container ? container.resetCssClass : this.resetCssClass
+        container ? container.resetCssClass : this.resetCssClass,
       ),
       resetButton: this.getValue(
-        container ? container.resetButton : this.resetButton
+        container ? container.resetButton : this.resetButton,
       ),
       //#endregion
     }).pipe(
@@ -1248,7 +1356,7 @@ export class XNextPrevResetAndHostContainerComponent
           onPrev: this.onPrev,
           onReset: this.onReset,
         };
-      })
+      }),
     );
   }
   //#endregion

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

@@ -43,6 +43,11 @@ export class XCardTestComponent extends XCardContainerComponent {}
           [showFooter]="props.cardShowFooter"
           [actionProvider]="props.cardActionProvider"
           [foregroundColor]="props.cardForegroundColor"
+          [showFullScreenButton]="props.showFullScreenButton"
+          [exitFullScreenButtonIcon]="props.exitFullScreenButtonIcon"
+          [enterFullScreenButtonIcon]="props.enterFullScreenButtonIcon"
+          [exitFullScreenButtonColor]="props.exitFullScreenButtonColor"
+          [enterFullScreenButtonColor]="props.enterFullScreenButtonColor"
         >
         </x-card>
       </ng-container>
@@ -55,16 +60,21 @@ export class XCardTestComponent extends XCardContainerComponent {}
           class="x-card"
           [showActions]="true"
           [color]="props.cardColor"
-          [ngClass]="props.cardCssClass"
           [isInPage]="props.isInPage"
+          [ngClass]="props.cardCssClass"
           [showHeader]="
             (notEmptyValue(props.cardTitle) | async) ||
             (notEmptyValue(props.cardSubTitle) | async)
           "
-          [subTitle]="getResourceValue(props.cardSubTitle)"
           [title]="getResourceValue(props.cardTitle) | async"
           [showFooter]="getValue(props.cardShowFooter) | async"
+          [subTitle]="getResourceValue(props.cardSubTitle) | async"
           [foregroundColor]="getValue(props.cardForegroundColor) | async"
+          [showFullScreenButton]="getValue(props.cardShowFullScreenButton) | async"
+          [exitFullScreenButtonIcon]="getValue(props.cardExitFullScreenButtonIcon) | async"
+          [enterFullScreenButtonIcon]="getValue(props.cardEnterFullScreenButtonIcon) | async"
+          [exitFullScreenButtonColor]="getValue(props.cardExitFullScreenButtonColor) | async"
+          [enterFullScreenButtonColor]="getValue(props.cardEnterFullScreenButtonColor) | async"
         >
           <!-- Content -->
           <ng-container *ngTemplateOutlet="componentsRef"></ng-container>

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.full-screen]="getValue(isFullScreen) | async"
 >
   <!-- Card Header -->
   <mat-card-header class="x-header" *ngIf="getValue(showHeader) | async">
@@ -51,6 +52,16 @@
 
     <!-- Header Content -->
     <ng-content select="[header]"></ng-content>
+
+    <!-- Fullscreen Toggle Button -->
+    <x-icon
+      class="x-fullscreen-toggle"
+      (clicked)="handleToggleFullScreen()"
+      [name]="getFullScreenIconName() | async"
+      [color]="getFullScreenIconColor() | async"
+      [clickable]="!loading && !uiDisabled && !lock"
+      *ngIf="getValue(showFullScreenButton) | async"
+    ></x-icon>
   </mat-card-header>
 
   <!-- Card Image -->

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

@@ -1,5 +1,5 @@
 //
-@import '../theme/theme.scss';
+@import "../theme/theme.scss";
 
 //
 :host::ng-deep.x-card.no-text {
@@ -20,7 +20,7 @@
   @include push-auto();
   @include applyWidthHeight();
   @include m-tb($d-l);
-  @include animation('fadeInUp');
+  @include animation("fadeInUp");
 
   &.mobile {
     box-sizing: border-box;
@@ -32,6 +32,19 @@
   }
 }
 
+.x-card.full-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  border-radius: 0;
+  margin: 0;
+  z-index: var(--full-screen-z-index, 9999);
+}
+
 .x-header,
 .x-content,
 .x-actions,

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

@@ -20,6 +20,19 @@ export class XCardComponent extends XCardContainerComponent {
   //#region Props ...
   //
   private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
+
+  //
+  private IS_FULL_SCREEN: boolean = false;
+  set isFullScreen(v: boolean) {
+    //
+    const isChanged = v != this.IS_FULL_SCREEN;
+
+    //
+    this.IS_FULL_SCREEN = v;
+  }
+  get isFullScreen() {
+    return this.IS_FULL_SCREEN;
+  }
   //#endregion
 
   //
@@ -31,7 +44,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,11 +84,84 @@ export class XCardComponent extends XCardContainerComponent {
               isNullOrEmptyString(object.title) &&
               isNullOrEmptyString(object.subTitle)
             );
-          })
+          }),
-        )
+        ),
-      )
+      ),
     );
   }
+
+  getFullScreenIconName() {
+    return this.getValue(this.isFullScreen).pipe(
+      concatMap((isFull) => {
+        //
+        if (!isFull) {
+          return this.getValue(this.enterFullScreenButtonIcon);
+        } else {
+          return this.getValue(this.exitFullScreenButtonIcon);
+        }
+      }),
+    );
+  }
+
+  getFullScreenIconColor() {
+    return this.getValue(this.isFullScreen).pipe(
+      concatMap((isFull) => {
+        //
+        if (!isFull) {
+          return this.getValue(this.enterFullScreenButtonColor);
+        } else {
+          return this.getValue(this.exitFullScreenButtonColor);
+        }
+      }),
+    );
+  }
+  //#endregion
+
+  //
+  //#region UI Handlers ...
+  async handleToggleFullScreen() {
+    await this.toggleFullScreen();
+  }
+  //#endregion
+
+  //
+  //#region Actions ...
+  public async enterFullScreen() {
+    //
+    if (this.isFullScreen) {
+      return;
+    }
+
+    //
+    this.isFullScreen = true;
+    // this.fullScreenChanged.emit(true);
+
+    //
+    this.detectChanges();
+  }
+
+  public async exitFullScreen() {
+    //
+    if (!this.isFullScreen) {
+      return;
+    }
+
+    //
+    this.isFullScreen = false;
+    // this.fullScreenChanged.emit(false);
+
+    //
+    this.detectChanges();
+  }
+
+  public async toggleFullScreen() {
+    //
+    if (this.isFullScreen) {
+      await this.exitFullScreen();
+    } else {
+      await this.enterFullScreen();
+    }
+  }
   //#endregion
 
   //
@@ -94,7 +180,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 +193,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;
       }
     });
   }

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

@@ -1,13 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { XCardComponent } from './x-card.component';
+import { XIconModule } from './../x-icon/x-icon.module';
 import { XBaseComponentModule } from '../modules/x-base-component.module';
 
 @NgModule({
-  declarations: [
+  declarations: [XCardComponent],
-    XCardComponent
+  imports: [CommonModule, XIconModule, XBaseComponentModule],
-  ],
+  exports: [XIconModule, XBaseComponentModule, XCardComponent],
-  imports: [CommonModule, XBaseComponentModule],
-  exports: [XBaseComponentModule, XCardComponent],
 })
 export class XCardModule {}

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

@@ -29,17 +29,20 @@ import { forkJoin, Observable, Subject } from 'rxjs';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import { XManagerService } from 'x-framework-services';
 import { XBaseActionModel } from '../classes/x-base-action.model';
+import { XIconIdentifier, XIconNames } from '../x-icon/x-icon.typings';
 import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
 import { XFrameworkComponentsConfig } from '../config/x-framework-components.config';
 
 export enum XCardAction {
   Refresh = 'refresh',
+  ExitFullScreen = 'exit_full_screen',
+  EnterFullScreen = 'enter_full_screen',
+  ToggleFullScreen = 'toggle_full_screen',
 }
 
 export type XCardActionIdentifier = XCardAction | string;
 
-export interface XCardActionModel
+export interface XCardActionModel extends XBaseActionModel<XCardActionIdentifier> {}
-  extends XBaseActionModel<XCardActionIdentifier> {}
 
 //
 //#region Container ...
@@ -59,6 +62,13 @@ export interface IXCardContainer extends IXBaseContainer {
   avatarUrl: XStandardType<string>;
   avatarTemplate: TemplateRef<any>;
 
+  //
+  showFullScreenButton: XStandardType<boolean>;
+  enterFullScreenButtonIcon: XStandardType<XIconIdentifier>;
+  enterFullScreenButtonColor: XStandardType<XColorIdentifier>;
+  exitFullScreenButtonIcon: XStandardType<XIconIdentifier>;
+  exitFullScreenButtonColor: XStandardType<XColorIdentifier>;
+
   //
   imageUrl: XStandardType<string>;
   imageDescription: XStandardType<XResourceIdentifier>;
@@ -97,6 +107,17 @@ export class XCardContainer
   readonly avatarUrl: XStandardType<string>;
   readonly avatarTemplate: TemplateRef<any>;
 
+  //
+  readonly showFullScreenButton: XStandardType<boolean> = false;
+  readonly enterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    XIconNames.fullscreen;
+  readonly enterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Light;
+  readonly exitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    XIconNames.close_fullscreen;
+  readonly exitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Light;
+
   //
   readonly imageUrl: XStandardType<string>;
   readonly imageDescription: XStandardType<XResourceIdentifier>;
@@ -153,6 +174,27 @@ export abstract class XCardContainerComponent
   @Input()
   avatarTemplate: TemplateRef<any> = this.propertyProvider.avatarTemplate;
 
+  //
+  @Input()
+  showFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.showFullScreenButton;
+
+  @Input()
+  enterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.enterFullScreenButtonIcon;
+
+  @Input()
+  enterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.enterFullScreenButtonColor;
+
+  @Input()
+  exitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.exitFullScreenButtonIcon;
+
+  @Input()
+  exitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.exitFullScreenButtonColor;
+
   //
   @Input()
   imageUrl: XStandardType<string> = this.propertyProvider.imageUrl;
@@ -187,7 +229,7 @@ export abstract class XCardContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardContainer
+    protected propertyProvider: XCardContainer,
   ) {
     super(
       config,
@@ -196,7 +238,7 @@ export abstract class XCardContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -204,37 +246,62 @@ export abstract class XCardContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXCardContainer
+    container?: IXCardContainer,
   ): Observable<IXCardContainer> {
     return forkJoin({
       //
       cssClass: this.getArrayValue(
-        container ? container.cssClass : this.cssClass
+        container ? container.cssClass : this.cssClass,
       ),
 
       //
       color: this.getValue(container ? container.color : this.color),
       foregroundColor: this.getValue(
-        container ? container.foregroundColor : this.foregroundColor
+        container ? container.foregroundColor : this.foregroundColor,
       ),
 
       //
       showHeader: this.getValue(
-        container ? container.showHeader : this.showHeader
+        container ? container.showHeader : this.showHeader,
       ),
       title: this.getValue(container ? container.title : this.title),
       subTitle: this.getValue(container ? container.subTitle : this.subTitle),
       avatarUrl: this.getValue(
-        container ? container.avatarUrl : this.avatarUrl
+        container ? container.avatarUrl : this.avatarUrl,
       ),
       avatarTemplate: this.getValue(
-        container ? container.avatarTemplate : this.avatarTemplate
+        container ? container.avatarTemplate : this.avatarTemplate,
+      ),
+
+      //
+      showFullScreenButton: this.getValue(
+        container ? container.showFullScreenButton : this.showFullScreenButton,
+      ),
+      enterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.enterFullScreenButtonIcon
+          : this.enterFullScreenButtonIcon,
+      ),
+      enterFullScreenButtonColor: this.getValue(
+        container
+          ? container.enterFullScreenButtonColor
+          : this.enterFullScreenButtonColor,
+      ),
+      exitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.exitFullScreenButtonIcon
+          : this.exitFullScreenButtonIcon,
+      ),
+      exitFullScreenButtonColor: this.getValue(
+        container
+          ? container.exitFullScreenButtonColor
+          : this.exitFullScreenButtonColor,
       ),
 
       //
       imageUrl: this.getValue(container ? container.imageUrl : this.imageUrl),
       imageDescription: this.getValue(
-        container ? container.imageDescription : this.imageDescription
+        container ? container.imageDescription : this.imageDescription,
       ),
 
       //
@@ -242,13 +309,13 @@ export abstract class XCardContainerComponent
 
       //
       showContent: this.getValue(
-        container ? container.showContent : this.showContent
+        container ? container.showContent : this.showContent,
       ),
       showActions: this.getValue(
-        container ? container.showActions : this.showActions
+        container ? container.showActions : this.showActions,
       ),
       showFooter: this.getValue(
-        container ? container.showFooter : this.showFooter
+        container ? container.showFooter : this.showFooter,
       ),
     }).pipe(
       map((data) => {
@@ -261,7 +328,7 @@ export abstract class XCardContainerComponent
             ? container.actionProvider
             : this.actionProvider,
         };
-      })
+      }),
     );
   }
   //#endregion
@@ -281,12 +348,16 @@ type TXComponentCardContainer = {
     | 'subTitle'
     | 'showFooter'
     | 'showActions'
+    | 'showFullScreenButton'
+    | 'enterFullScreenButtonIcon'
+    | 'enterFullScreenButtonColor'
+    | 'exitFullScreenButtonIcon'
+    | 'exitFullScreenButtonColor'
   > as `card${Capitalize<string & TKey>}`]: IXCardContainer[TKey];
 };
 
 export interface IXComponentCardContainer
-  extends TXComponentCardContainer,
+  extends TXComponentCardContainer, IXBaseComponentContainer {
-    IXBaseComponentContainer {
   isInPage: XStandardType<boolean>;
   wrapWithCard: XStandardType<boolean>;
 }
@@ -327,6 +398,18 @@ export class XComponentCardContainer
     this.propertyProvider.showFooter;
   readonly cardShowActions: XStandardType<boolean> =
     this.propertyProvider.showActions;
+
+  //
+  readonly cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.showFullScreenButton;
+  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.enterFullScreenButtonIcon;
+  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.enterFullScreenButtonColor;
+  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.exitFullScreenButtonIcon;
+  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.exitFullScreenButtonColor;
   //#endregion
 
   //
@@ -387,6 +470,27 @@ export abstract class XComponentCardContainerComponent
   @Input()
   cardShowActions: XStandardType<boolean> =
     this.propertyProvider.cardShowActions;
+
+  //
+  @Input()
+  cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+
+  @Input()
+  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+
+  @Input()
+  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+
+  @Input()
+  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+
+  @Input()
+  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -400,7 +504,7 @@ export abstract class XComponentCardContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentCardContainer
+    protected propertyProvider: XComponentCardContainer,
   ) {
     super(
       config,
@@ -409,7 +513,7 @@ export abstract class XComponentCardContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -417,34 +521,59 @@ export abstract class XComponentCardContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXComponentCardContainer
+    container?: IXComponentCardContainer,
   ): Observable<IXComponentCardContainer> {
     return forkJoin({
       //
       isInPage: this.getValue(container ? container.isInPage : this.isInPage),
       wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard
+        container ? container.wrapWithCard : this.wrapWithCard,
       ),
       cardCssClass: this.getValue(
-        container ? container.cardCssClass : this.cardCssClass
+        container ? container.cardCssClass : this.cardCssClass,
       ),
       cardColor: this.getValue(
-        container ? container.cardColor : this.cardColor
+        container ? container.cardColor : this.cardColor,
       ),
       cardForegroundColor: this.getValue(
-        container ? container.cardForegroundColor : this.cardForegroundColor
+        container ? container.cardForegroundColor : this.cardForegroundColor,
       ),
       cardTitle: this.getValue(
-        container ? container.cardTitle : this.cardTitle
+        container ? container.cardTitle : this.cardTitle,
       ),
       cardSubTitle: this.getValue(
-        container ? container.cardSubTitle : this.cardSubTitle
+        container ? container.cardSubTitle : this.cardSubTitle,
       ),
       cardShowFooter: this.getValue(
-        container ? container.cardShowFooter : this.cardShowFooter
+        container ? container.cardShowFooter : this.cardShowFooter,
       ),
       cardShowActions: this.getValue(
-        container ? container.cardShowActions : this.cardShowActions
+        container ? container.cardShowActions : this.cardShowActions,
+      ),
+      cardShowFullScreenButton: this.getValue(
+        container
+          ? container.cardShowFullScreenButton
+          : this.cardShowFullScreenButton,
+      ),
+      cardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonIcon
+          : this.cardEnterFullScreenButtonIcon,
+      ),
+      cardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonColor
+          : this.cardEnterFullScreenButtonColor,
+      ),
+      cardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonIcon
+          : this.cardExitFullScreenButtonIcon,
+      ),
+      cardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonColor
+          : this.cardExitFullScreenButtonColor,
       ),
     }).pipe(
       map((data) => {
@@ -457,7 +586,7 @@ export abstract class XComponentCardContainerComponent
             ? container.cardActionProvider
             : this.cardActionProvider,
         };
-      })
+      }),
     );
   }
   //#endregion

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

@@ -14,7 +14,18 @@
     [title]="getResourceValue(cardTitle) | async"
     [showFooter]="getValue(cardShowFooter) | async"
     [showActions]="getValue(cardShowActions) | async"
+    [enterFullScreenButtonIcon]="
+      getValue(cardEnterFullScreenButtonIcon) | async
+    "
+    [enterFullScreenButtonColor]="
+      getValue(cardEnterFullScreenButtonColor) | async
+    "
+    [exitFullScreenButtonColor]="
+      getValue(cardExitFullScreenButtonColor) | async
+    "
     [foregroundColor]="getValue(cardForegroundColor) | async"
+    [showFullScreenButton]="getValue(cardShowFullScreenButton) | async"
+    [exitFullScreenButtonIcon]="getValue(cardExitFullScreenButtonIcon) | async"
   >
     <!-- Content -->
     <ng-container *ngTemplateOutlet="componentsRef"></ng-container>

projects/x-framework-components/src/lib/x-file-drop-area/x-file-drop-area.typings.ts

@@ -45,8 +45,7 @@ export enum XFileDropAreaAction {
 
 export type XFileDropAreaActionIdentifier = XFileDropAreaAction | string;
 
-export interface XFileDropAreaActionModel
+export interface XFileDropAreaActionModel extends XBaseActionModel<XFileDropAreaActionIdentifier> {}
-  extends XBaseActionModel<XFileDropAreaActionIdentifier> {}
 
 export enum XFileDropAreaCssVars {
   LabelColor = 'label-color',
@@ -211,7 +210,7 @@ export abstract class XFileDropAreaContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XFileDropAreaContainer
+    protected propertyProvider: XFileDropAreaContainer,
   ) {
     super(
       config,
@@ -221,7 +220,7 @@ export abstract class XFileDropAreaContainerComponent
       ruler,
       zone,
       changeDetector,
-      propertyProvider
+      propertyProvider,
     );
   }
   //#endregion
@@ -229,7 +228,7 @@ export abstract class XFileDropAreaContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXFileDropAreaContainer
+    container?: IXFileDropAreaContainer,
   ): Observable<IXFileDropAreaContainer> {
     return super
       .extractProps(container ? container : this)
@@ -238,40 +237,40 @@ export abstract class XFileDropAreaContainerComponent
           return forkJoin({
             //
             cssClass: this.getArrayValue(
-              container ? container.cssClass : this.cssClass
+              container ? container.cssClass : this.cssClass,
             ),
 
             //
             color: this.getValue(container ? container.color : this.color),
             foregroundColor: this.getValue(
-              container ? container.foregroundColor : this.foregroundColor
+              container ? container.foregroundColor : this.foregroundColor,
             ),
             icon: this.getValue(container ? container.icon : this.icon),
             message: this.getValue(
-              container ? container.message : this.message
+              container ? container.message : this.message,
             ),
             disableFileCheck: this.getValue(
-              container ? container.disableFileCheck : this.disableFileCheck
+              container ? container.disableFileCheck : this.disableFileCheck,
             ),
             supportsMultipleFiles: this.getValue(
               container
                 ? container.supportsMultipleFiles
-                : this.supportsMultipleFiles
+                : this.supportsMultipleFiles,
             ),
             allowedExtensions: this.getValue(
-              container ? container.allowedExtensions : this.allowedExtensions
+              container ? container.allowedExtensions : this.allowedExtensions,
             ),
             dragDisabled: this.getValue(
-              container ? container.dragDisabled : this.dragDisabled
+              container ? container.dragDisabled : this.dragDisabled,
             ),
             successColor: this.getValue(
-              container ? container.successColor : this.successColor
+              container ? container.successColor : this.successColor,
             ),
             errorColor: this.getValue(
-              container ? container.errorColor : this.errorColor
+              container ? container.errorColor : this.errorColor,
             ),
             accentColor: this.getValue(
-              container ? container.accentColor : this.accentColor
+              container ? container.accentColor : this.accentColor,
             ),
           }).pipe(
             map((data) => {
@@ -279,9 +278,9 @@ export abstract class XFileDropAreaContainerComponent
                 superData,
                 data,
               };
-            })
+            }),
           );
-        })
+        }),
       )
       .pipe(
         map((info) => {
@@ -305,7 +304,7 @@ export abstract class XFileDropAreaContainerComponent
             //
             filesChangeEmiter: this.filesChangeEmiter,
           };
-        })
+        }),
       );
   }
   //#endregion
@@ -321,8 +320,7 @@ type TXComponentFileDropAreaContainer = {
 };
 
 export interface IXComponentFileDropAreaContainer
-  extends TXComponentFileDropAreaContainer,
+  extends TXComponentFileDropAreaContainer, IXBaseComponentContainer {
-    IXBaseComponentContainer {
   showFileDropArea: XStandardType<boolean>;
 }
 
@@ -405,6 +403,16 @@ export class XComponentFileDropAreaContainer
     new Subject<XCardActionModel>();
   readonly fileDropAreaCardSubTitle: XStandardType<XResourceIdentifier>;
   readonly fileDropAreaCardCssClass: XStandardType<XOneOrManyType<string>>;
+  readonly fileDropAreaCardShowFullScreenButton: XStandardType<boolean> = false;
+  readonly fileDropAreaCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    XIconNames.fullscreen;
+  readonly fileDropAreaCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Light;
+  readonly fileDropAreaCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    XIconNames.close_fullscreen;
+  readonly fileDropAreaCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Light;
+
   //#endregion
   //#endregion
 
@@ -421,7 +429,7 @@ export class XComponentFileDropAreaContainer
 })
 @Component({
   template: `
-    <!-- 
+    <!--
         <ng-container *ngIf="extractProps() | async as props">
           <ng-container *ngIf="props.showFileDropArea">
             <x-file-drop-area
@@ -452,7 +460,7 @@ export class XComponentFileDropAreaContainer
               [supportsMultipleFiles]="props.fileDropAreaSupportsMultipleFiles"
             ></x-file-drop-area>
           </ng-container>
-        </ng-container> 
+        </ng-container>
     -->
   `,
 })
@@ -575,6 +583,26 @@ export abstract class XComponentFileDropAreaContainerComponent
   @Input()
   fileDropAreaCardCssClass: XStandardType<XOneOrManyType<string>> =
     this.propertyProvider.fileDropAreaCardCssClass;
+
+  @Input()
+  fileDropAreaCardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.fileDropAreaCardShowFullScreenButton;
+
+  @Input()
+  fileDropAreaCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.fileDropAreaCardEnterFullScreenButtonIcon;
+
+  @Input()
+  fileDropAreaCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.fileDropAreaCardEnterFullScreenButtonColor;
+
+  @Input()
+  fileDropAreaCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.fileDropAreaCardExitFullScreenButtonIcon;
+
+  @Input()
+  fileDropAreaCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.fileDropAreaCardExitFullScreenButtonColor;
   //#endregion
   //#endregion
 
@@ -589,7 +617,7 @@ export abstract class XComponentFileDropAreaContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentFileDropAreaContainer
+    protected propertyProvider: XComponentFileDropAreaContainer,
   ) {
     super(
       config,
@@ -598,7 +626,7 @@ export abstract class XComponentFileDropAreaContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -606,108 +634,137 @@ export abstract class XComponentFileDropAreaContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXComponentFileDropAreaContainer
+    container?: IXComponentFileDropAreaContainer,
   ): Observable<IXComponentFileDropAreaContainer> {
     return forkJoin({
       //
       fileDropAreaCssClass: this.getValue(
-        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass
+        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass,
       ),
       fileDropAreaColor: this.getValue(
-        container ? container.fileDropAreaColor : this.fileDropAreaColor
+        container ? container.fileDropAreaColor : this.fileDropAreaColor,
       ),
       fileDropAreaForegroundColor: this.getValue(
         container
           ? container.fileDropAreaForegroundColor
-          : this.fileDropAreaForegroundColor
+          : this.fileDropAreaForegroundColor,
       ),
       fileDropAreaIcon: this.getValue(
-        container ? container.fileDropAreaIcon : this.fileDropAreaIcon
+        container ? container.fileDropAreaIcon : this.fileDropAreaIcon,
       ),
       fileDropAreaMessage: this.getValue(
-        container ? container.fileDropAreaMessage : this.fileDropAreaMessage
+        container ? container.fileDropAreaMessage : this.fileDropAreaMessage,
       ),
       fileDropAreaDisableFileCheck: this.getValue(
         container
           ? container.fileDropAreaDisableFileCheck
-          : this.fileDropAreaDisableFileCheck
+          : this.fileDropAreaDisableFileCheck,
       ),
       fileDropAreaSupportsMultipleFiles: this.getValue(
         container
           ? container.fileDropAreaSupportsMultipleFiles
-          : this.fileDropAreaSupportsMultipleFiles
+          : this.fileDropAreaSupportsMultipleFiles,
       ),
       fileDropAreaAllowedExtensions: this.getValue(
         container
           ? container.fileDropAreaAllowedExtensions
-          : this.fileDropAreaAllowedExtensions
+          : this.fileDropAreaAllowedExtensions,
       ),
       fileDropAreaDragDisabled: this.getValue(
         container
           ? container.fileDropAreaDragDisabled
-          : this.fileDropAreaDragDisabled
+          : this.fileDropAreaDragDisabled,
       ),
       fileDropAreaContentTemplate: this.getValue(
         container
           ? container.fileDropAreaContentTemplate
-          : this.fileDropAreaContentTemplate
+          : this.fileDropAreaContentTemplate,
       ),
       fileDropAreaSuccessColor: this.getValue(
         container
           ? container.fileDropAreaSuccessColor
-          : this.fileDropAreaSuccessColor
+          : this.fileDropAreaSuccessColor,
       ),
       fileDropAreaErrorColor: this.getValue(
         container
           ? container.fileDropAreaErrorColor
-          : this.fileDropAreaErrorColor
+          : this.fileDropAreaErrorColor,
       ),
       fileDropAreaAccentColor: this.getValue(
         container
           ? container.fileDropAreaAccentColor
-          : this.fileDropAreaAccentColor
+          : this.fileDropAreaAccentColor,
       ),
       showFileDropArea: this.getValue(
-        container ? container.showFileDropArea : this.showFileDropArea
+        container ? container.showFileDropArea : this.showFileDropArea,
       ),
       fileDropAreaIsInPage: this.getValue(
-        container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage
+        container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage,
       ),
       fileDropAreaWrapWithCard: this.getValue(
         container
           ? container.fileDropAreaWrapWithCard
-          : this.fileDropAreaWrapWithCard
+          : this.fileDropAreaWrapWithCard,
       ),
       fileDropAreaCardShowFooter: this.getValue(
         container
           ? container.fileDropAreaCardShowFooter
-          : this.fileDropAreaCardShowFooter
+          : this.fileDropAreaCardShowFooter,
       ),
       fileDropAreaCardShowActions: this.getValue(
         container
           ? container.fileDropAreaCardShowActions
-          : this.fileDropAreaCardShowActions
+          : this.fileDropAreaCardShowActions,
       ),
       fileDropAreaCardColor: this.getValue(
-        container ? container.fileDropAreaCardColor : this.fileDropAreaCardColor
+        container
+          ? container.fileDropAreaCardColor
+          : this.fileDropAreaCardColor,
       ),
       fileDropAreaCardForegroundColor: this.getValue(
         container
           ? container.fileDropAreaCardForegroundColor
-          : this.fileDropAreaCardForegroundColor
+          : this.fileDropAreaCardForegroundColor,
       ),
       fileDropAreaCardTitle: this.getValue(
-        container ? container.fileDropAreaCardTitle : this.fileDropAreaCardTitle
+        container
+          ? container.fileDropAreaCardTitle
+          : this.fileDropAreaCardTitle,
       ),
       fileDropAreaCardSubTitle: this.getValue(
         container
           ? container.fileDropAreaCardSubTitle
-          : this.fileDropAreaCardSubTitle
+          : this.fileDropAreaCardSubTitle,
       ),
       fileDropAreaCardCssClass: this.getValue(
         container
           ? container.fileDropAreaCardCssClass
-          : this.fileDropAreaCardCssClass
+          : this.fileDropAreaCardCssClass,
+      ),
+      fileDropAreaCardShowFullScreenButton: this.getValue(
+        container
+          ? container.fileDropAreaCardShowFullScreenButton
+          : this.fileDropAreaCardShowFullScreenButton,
+      ),
+      fileDropAreaCardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.fileDropAreaCardEnterFullScreenButtonIcon
+          : this.fileDropAreaCardEnterFullScreenButtonIcon,
+      ),
+      fileDropAreaCardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.fileDropAreaCardEnterFullScreenButtonColor
+          : this.fileDropAreaCardEnterFullScreenButtonColor,
+      ),
+      fileDropAreaCardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.fileDropAreaCardExitFullScreenButtonIcon
+          : this.fileDropAreaCardExitFullScreenButtonIcon,
+      ),
+      fileDropAreaCardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.fileDropAreaCardExitFullScreenButtonColor
+          : this.fileDropAreaCardExitFullScreenButtonColor,
       ),
     }).pipe(
       map((data) => {
@@ -728,7 +785,7 @@ export abstract class XComponentFileDropAreaContainerComponent
           //
           fileDropAreaFilesChangeEmiter: this.fileDropAreaFilesChangeEmiter,
         };
-      })
+      }),
     );
   }
   //#endregion

projects/x-framework-components/src/lib/x-file-upload/x-file-upload.typings.ts

@@ -96,12 +96,11 @@ export enum XFileUploadAction {
 
 export type XFileUploadActionIdentifier = XFileUploadAction | string;
 
-export interface XFileUploadActionModel
+export interface XFileUploadActionModel extends XBaseActionModel<XFileUploadActionIdentifier> {}
-  extends XBaseActionModel<XFileUploadActionIdentifier> {}
 
 export const defaultFileUploadListFilteringHandler: XListFilteringHandler = (
   query: string,
-  items: XListItem<File>[]
+  items: XListItem<File>[],
 ) => {
   //
   if (!query || !hasChild(items)) {
@@ -110,7 +109,7 @@ export const defaultFileUploadListFilteringHandler: XListFilteringHandler = (
 
   //
   return items.filter((i) =>
-    toNormalString(fileToJsonString(i.data)).includes(toNormalString(query))
+    toNormalString(fileToJsonString(i.data)).includes(toNormalString(query)),
   );
 };
 
@@ -130,8 +129,7 @@ type TXFileUploadContainer = IXComponentCardContainer &
   IXFileContainer;
 
 export interface IXFileUploadContainer
-  extends IXBaseContainer,
+  extends IXBaseContainer, TXFileUploadContainer {
-    TXFileUploadContainer {
   //
   actionProvider: Subject<XFileUploadActionModel>;
   cssClass: XStandardType<XOneOrManyType<string>>;
@@ -170,9 +168,8 @@ export class XFileUploadContainer
   readonly foregroundColor: XStandardType<boolean> = false;
 
   //
-  readonly fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> = new EventEmitter<
+  readonly fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> =
-    XOneOrManyType<File | XFileBlob>
+    new EventEmitter<XOneOrManyType<File | XFileBlob>>();
-  >();
 
   readonly actionBarHideActions: XStandardType<
     XOneOrManyType<XActionBarActionIdentifier>
@@ -253,6 +250,16 @@ export class XFileUploadContainer
     this.cardPropertyProvider.cardShowFooter;
   readonly cardShowActions: XStandardType<boolean> =
     this.cardPropertyProvider.cardShowActions;
+  readonly cardShowFullScreenButton: XStandardType<boolean> =
+    this.cardPropertyProvider.cardShowFullScreenButton;
+  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
+  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
+  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
+  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -438,7 +445,7 @@ export class XFileUploadContainer
     protected emptyPropertyProvider: XComponentEmptyContainer,
     protected actionBarPropertyProvider: XComponentActionBarContainer,
     protected searchBarPropertyProvider: XComponentSearchBarContainer,
-    protected fileDropAreaPropertyProvider: XComponentFileDropAreaContainer
+    protected fileDropAreaPropertyProvider: XComponentFileDropAreaContainer,
   ) {
     super();
   }
@@ -476,7 +483,8 @@ export abstract class XFileUploadContainerComponent
 
   //
   @Output()
-  fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> = new EventEmitter();
+  fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> =
+    new EventEmitter();
 
   @Input()
   actionBarHideActions: XStandardType<
@@ -596,6 +604,26 @@ export abstract class XFileUploadContainerComponent
   @Input()
   cardShowActions: XStandardType<boolean> =
     this.propertyProvider.cardShowActions;
+
+  @Input()
+  cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+
+  @Input()
+  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+
+  @Input()
+  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+
+  @Input()
+  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+
+  @Input()
+  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -666,7 +694,8 @@ export abstract class XFileUploadContainerComponent
 
   //
   @Output()
-  actionBarActionFired: EventEmitter<XActionBarActionFiredModel> = new EventEmitter<XActionBarActionFiredModel>();
+  actionBarActionFired: EventEmitter<XActionBarActionFiredModel> =
+    new EventEmitter<XActionBarActionFiredModel>();
   //#endregion
 
   //
@@ -888,7 +917,7 @@ export abstract class XFileUploadContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XFileUploadContainer
+    protected propertyProvider: XFileUploadContainer,
   ) {
     super(
       config,
@@ -897,7 +926,7 @@ export abstract class XFileUploadContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -905,313 +934,342 @@ export abstract class XFileUploadContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXFileUploadContainer
+    container?: IXFileUploadContainer,
   ): Observable<IXFileUploadContainer> {
     return forkJoin({
       //
       cssClass: this.getValue(container ? container.cssClass : this.cssClass),
       color: this.getValue(container ? container.color : this.color),
       foregroundColor: this.getValue(
-        container ? container.foregroundColor : this.foregroundColor
+        container ? container.foregroundColor : this.foregroundColor,
       ),
       actionBarHideActions: this.getValue(
-        container ? container.actionBarHideActions : this.actionBarHideActions
+        container ? container.actionBarHideActions : this.actionBarHideActions,
       ),
       showFileDropArea: this.getValue(
-        container ? container.showFileDropArea : this.showFileDropArea
+        container ? container.showFileDropArea : this.showFileDropArea,
       ),
       fileDropAreaCssClass: this.getValue(
-        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass
+        container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass,
       ),
       fileDropAreaColor: this.getValue(
-        container ? container.fileDropAreaColor : this.fileDropAreaColor
+        container ? container.fileDropAreaColor : this.fileDropAreaColor,
       ),
       fileDropAreaForegroundColor: this.getValue(
         container
           ? container.fileDropAreaForegroundColor
-          : this.fileDropAreaForegroundColor
+          : this.fileDropAreaForegroundColor,
       ),
       fileDropAreaIcon: this.getValue(
-        container ? container.fileDropAreaIcon : this.fileDropAreaIcon
+        container ? container.fileDropAreaIcon : this.fileDropAreaIcon,
       ),
       fileDropAreaMessage: this.getValue(
-        container ? container.fileDropAreaMessage : this.fileDropAreaMessage
+        container ? container.fileDropAreaMessage : this.fileDropAreaMessage,
       ),
       fileDropAreaDisableFileCheck: this.getValue(
         container
           ? container.fileDropAreaDisableFileCheck
-          : this.fileDropAreaDisableFileCheck
+          : this.fileDropAreaDisableFileCheck,
       ),
       fileDropAreaSupportsMultipleFiles: this.getValue(
         container
           ? container.fileDropAreaSupportsMultipleFiles
-          : this.fileDropAreaSupportsMultipleFiles
+          : this.fileDropAreaSupportsMultipleFiles,
       ),
       fileDropAreaAllowedExtensions: this.getValue(
         container
           ? container.fileDropAreaAllowedExtensions
-          : this.fileDropAreaAllowedExtensions
+          : this.fileDropAreaAllowedExtensions,
       ),
       fileDropAreaDragDisabled: this.getValue(
         container
           ? container.fileDropAreaDragDisabled
-          : this.fileDropAreaDragDisabled
+          : this.fileDropAreaDragDisabled,
       ),
       fileDropAreaContentTemplate: this.getValue(
         container
           ? container.fileDropAreaContentTemplate
-          : this.fileDropAreaContentTemplate
+          : this.fileDropAreaContentTemplate,
       ),
       fileDropAreaSuccessColor: this.getValue(
         container
           ? container.fileDropAreaSuccessColor
-          : this.fileDropAreaSuccessColor
+          : this.fileDropAreaSuccessColor,
       ),
       fileDropAreaErrorColor: this.getValue(
         container
           ? container.fileDropAreaErrorColor
-          : this.fileDropAreaErrorColor
+          : this.fileDropAreaErrorColor,
       ),
       fileDropAreaAccentColor: this.getValue(
         container
           ? container.fileDropAreaAccentColor
-          : this.fileDropAreaAccentColor
+          : this.fileDropAreaAccentColor,
       ),
       isInPage: this.getValue(container ? container.isInPage : this.isInPage),
       wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard
+        container ? container.wrapWithCard : this.wrapWithCard,
       ),
       cardCssClass: this.getValue(
-        container ? container.cardCssClass : this.cardCssClass
+        container ? container.cardCssClass : this.cardCssClass,
       ),
       cardColor: this.getValue(
-        container ? container.cardColor : this.cardColor
+        container ? container.cardColor : this.cardColor,
       ),
       cardForegroundColor: this.getValue(
-        container ? container.cardForegroundColor : this.cardForegroundColor
+        container ? container.cardForegroundColor : this.cardForegroundColor,
       ),
       cardTitle: this.getValue(
-        container ? container.cardTitle : this.cardTitle
+        container ? container.cardTitle : this.cardTitle,
       ),
       cardSubTitle: this.getValue(
-        container ? container.cardSubTitle : this.cardSubTitle
+        container ? container.cardSubTitle : this.cardSubTitle,
       ),
       cardShowFooter: this.getValue(
-        container ? container.cardShowFooter : this.cardShowFooter
+        container ? container.cardShowFooter : this.cardShowFooter,
       ),
       cardShowActions: this.getValue(
-        container ? container.cardShowActions : this.cardShowActions
+        container ? container.cardShowActions : this.cardShowActions,
+      ),
+      cardShowFullScreenButton: this.getValue(
+        container
+          ? container.cardShowFullScreenButton
+          : this.cardShowFullScreenButton,
+      ),
+      cardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonIcon
+          : this.cardEnterFullScreenButtonIcon,
+      ),
+      cardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonColor
+          : this.cardEnterFullScreenButtonColor,
+      ),
+      cardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonIcon
+          : this.cardExitFullScreenButtonIcon,
+      ),
+      cardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonColor
+          : this.cardExitFullScreenButtonColor,
       ),
       showList: this.getValue(container ? container.showList : this.showList),
       listConfirmRemove: this.getValue(
-        container ? container.listConfirmRemove : this.listConfirmRemove
+        container ? container.listConfirmRemove : this.listConfirmRemove,
       ),
       listCssClass: this.getValue(
-        container ? container.listCssClass : this.listCssClass
+        container ? container.listCssClass : this.listCssClass,
       ),
       listShowToolbar: this.getValue(
-        container ? container.listShowToolbar : this.listShowToolbar
+        container ? container.listShowToolbar : this.listShowToolbar,
       ),
       listStickyToolbar: this.getValue(
-        container ? container.listStickyToolbar : this.listStickyToolbar
+        container ? container.listStickyToolbar : this.listStickyToolbar,
       ),
       listEnableReordering: this.getValue(
-        container ? container.listEnableReordering : this.listEnableReordering
+        container ? container.listEnableReordering : this.listEnableReordering,
       ),
       listShowDivider: this.getValue(
-        container ? container.listShowDivider : this.listShowDivider
+        container ? container.listShowDivider : this.listShowDivider,
       ),
       listFilteringHandler: this.getValue(
-        container ? container.listFilteringHandler : this.listFilteringHandler
+        container ? container.listFilteringHandler : this.listFilteringHandler,
       ),
       showActionBar: this.getValue(
-        container ? container.showActionBar : this.showActionBar
+        container ? container.showActionBar : this.showActionBar,
       ),
       actionBarCssClass: this.getValue(
-        container ? container.actionBarCssClass : this.actionBarCssClass
+        container ? container.actionBarCssClass : this.actionBarCssClass,
       ),
       actionBarColor: this.getValue(
-        container ? container.actionBarColor : this.actionBarColor
+        container ? container.actionBarColor : this.actionBarColor,
       ),
       actionBarForegroundColor: this.getValue(
         container
           ? container.actionBarForegroundColor
-          : this.actionBarForegroundColor
+          : this.actionBarForegroundColor,
       ),
       actionBarActions: this.getValue(
-        container ? container.actionBarActions : this.actionBarActions
+        container ? container.actionBarActions : this.actionBarActions,
       ),
       showSearchBar: this.getValue(
-        container ? container.showSearchBar : this.showSearchBar
+        container ? container.showSearchBar : this.showSearchBar,
       ),
       searchBarCssClass: this.getValue(
-        container ? container.searchBarCssClass : this.searchBarCssClass
+        container ? container.searchBarCssClass : this.searchBarCssClass,
       ),
       searchBarColor: this.getValue(
-        container ? container.searchBarColor : this.searchBarColor
+        container ? container.searchBarColor : this.searchBarColor,
       ),
       searchBarForegroundColor: this.getValue(
         container
           ? container.searchBarForegroundColor
-          : this.searchBarForegroundColor
+          : this.searchBarForegroundColor,
       ),
       searchBarSearchInputColor: this.getValue(
         container
           ? container.searchBarSearchInputColor
-          : this.searchBarSearchInputColor
+          : this.searchBarSearchInputColor,
       ),
       searchBarForegroundSearchInputColor: this.getValue(
         container
           ? container.searchBarForegroundSearchInputColor
-          : this.searchBarForegroundSearchInputColor
+          : this.searchBarForegroundSearchInputColor,
       ),
       searchBarType: this.getValue(
-        container ? container.searchBarType : this.searchBarType
+        container ? container.searchBarType : this.searchBarType,
       ),
       searchBarTitle: this.getValue(
-        container ? container.searchBarTitle : this.searchBarTitle
+        container ? container.searchBarTitle : this.searchBarTitle,
       ),
       searchBarValue: this.getValue(
-        container ? container.searchBarValue : this.searchBarValue
+        container ? container.searchBarValue : this.searchBarValue,
       ),
       searchBarEnterKeyHint: this.getValue(
-        container ? container.searchBarEnterKeyHint : this.searchBarEnterKeyHint
+        container
+          ? container.searchBarEnterKeyHint
+          : this.searchBarEnterKeyHint,
       ),
       searchBarKeyboardType: this.getValue(
-        container ? container.searchBarKeyboardType : this.searchBarKeyboardType
+        container
+          ? container.searchBarKeyboardType
+          : this.searchBarKeyboardType,
       ),
       searchBarSpellcheck: this.getValue(
-        container ? container.searchBarSpellcheck : this.searchBarSpellcheck
+        container ? container.searchBarSpellcheck : this.searchBarSpellcheck,
       ),
       searchBarDebounce: this.getValue(
-        container ? container.searchBarDebounce : this.searchBarDebounce
+        container ? container.searchBarDebounce : this.searchBarDebounce,
       ),
       searchBarShowCancelButton: this.getValue(
         container
           ? container.searchBarShowCancelButton
-          : this.searchBarShowCancelButton
+          : this.searchBarShowCancelButton,
       ),
       searchBarCancelButtonIcon: this.getValue(
         container
           ? container.searchBarCancelButtonIcon
-          : this.searchBarCancelButtonIcon
+          : this.searchBarCancelButtonIcon,
       ),
       searchBarCancelButtonTitle: this.getValue(
         container
           ? container.searchBarCancelButtonTitle
-          : this.searchBarCancelButtonTitle
+          : this.searchBarCancelButtonTitle,
       ),
       searchBarCancelButtonIconColor: this.getValue(
         container
           ? container.searchBarCancelButtonIconColor
-          : this.searchBarCancelButtonIconColor
+          : this.searchBarCancelButtonIconColor,
       ),
       searchBarShowClearButton: this.getValue(
         container
           ? container.searchBarShowClearButton
-          : this.searchBarShowClearButton
+          : this.searchBarShowClearButton,
       ),
       searchBarClearButtonIcon: this.getValue(
         container
           ? container.searchBarClearButtonIcon
-          : this.searchBarClearButtonIcon
+          : this.searchBarClearButtonIcon,
       ),
       searchBarClearButtonIconColor: this.getValue(
         container
           ? container.searchBarClearButtonIconColor
-          : this.searchBarClearButtonIconColor
+          : this.searchBarClearButtonIconColor,
       ),
       searchBarSearchButtonIcon: this.getValue(
         container
           ? container.searchBarSearchButtonIcon
-          : this.searchBarSearchButtonIcon
+          : this.searchBarSearchButtonIcon,
       ),
       searchBarSearchButtonIconColor: this.getValue(
         container
           ? container.searchBarSearchButtonIconColor
-          : this.searchBarSearchButtonIconColor
+          : this.searchBarSearchButtonIconColor,
       ),
       showEmpty: this.getValue(
-        container ? container.showEmpty : this.showEmpty
+        container ? container.showEmpty : this.showEmpty,
       ),
       emptyCssClass: this.getValue(
-        container ? container.emptyCssClass : this.emptyCssClass
+        container ? container.emptyCssClass : this.emptyCssClass,
       ),
       emptyColor: this.getValue(
-        container ? container.emptyColor : this.emptyColor
+        container ? container.emptyColor : this.emptyColor,
       ),
       emptyForegroundColor: this.getValue(
-        container ? container.emptyForegroundColor : this.emptyForegroundColor
+        container ? container.emptyForegroundColor : this.emptyForegroundColor,
       ),
       emptyMessage: this.getValue(
-        container ? container.emptyMessage : this.emptyMessage
+        container ? container.emptyMessage : this.emptyMessage,
       ),
       emptyMessageColor: this.getValue(
-        container ? container.emptyMessageColor : this.emptyMessageColor
+        container ? container.emptyMessageColor : this.emptyMessageColor,
       ),
       emptyForegroundMessageColor: this.getValue(
         container
           ? container.emptyForegroundMessageColor
-          : this.emptyForegroundMessageColor
+          : this.emptyForegroundMessageColor,
       ),
       emptyHasRefresh: this.getValue(
-        container ? container.emptyHasRefresh : this.emptyHasRefresh
+        container ? container.emptyHasRefresh : this.emptyHasRefresh,
       ),
       emptyRefreshButtonColor: this.getValue(
         container
           ? container.emptyRefreshButtonColor
-          : this.emptyRefreshButtonColor
+          : this.emptyRefreshButtonColor,
       ),
       emptyForegroundRefreshButtonColor: this.getValue(
         container
           ? container.emptyForegroundRefreshButtonColor
-          : this.emptyForegroundRefreshButtonColor
+          : this.emptyForegroundRefreshButtonColor,
       ),
       emptyRefreshIcon: this.getValue(
-        container ? container.emptyRefreshIcon : this.emptyRefreshIcon
+        container ? container.emptyRefreshIcon : this.emptyRefreshIcon,
       ),
       emptyFileException: this.getValue(
-        container ? container.emptyFileException : this.emptyFileException
+        container ? container.emptyFileException : this.emptyFileException,
       ),
       notAllowedFileException: this.getValue(
         container
           ? container.notAllowedFileException
-          : this.notAllowedFileException
+          : this.notAllowedFileException,
       ),
       allowedExtensions: this.getValue(
-        container ? container.allowedExtensions : this.allowedExtensions
+        container ? container.allowedExtensions : this.allowedExtensions,
       ),
       maxAllowedFiles: this.getValue(
-        container ? container.maxAllowedFiles : this.maxAllowedFiles
+        container ? container.maxAllowedFiles : this.maxAllowedFiles,
       ),
       maxAllowedFilesException: this.getValue(
         container
           ? container.maxAllowedFilesException
-          : this.maxAllowedFilesException
+          : this.maxAllowedFilesException,
       ),
       maxAllowedSize: this.getValue(
-        container ? container.maxAllowedSize : this.maxAllowedSize
+        container ? container.maxAllowedSize : this.maxAllowedSize,
       ),
       maxAllowedSizeException: this.getValue(
         container
           ? container.maxAllowedSizeException
-          : this.maxAllowedSizeException
+          : this.maxAllowedSizeException,
       ),
       minAllowedFileSize: this.getValue(
-        container ? container.minAllowedFileSize : this.minAllowedFileSize
+        container ? container.minAllowedFileSize : this.minAllowedFileSize,
       ),
       minAllowedFileSizeException: this.getValue(
         container
           ? container.minAllowedFileSizeException
-          : this.minAllowedFileSizeException
+          : this.minAllowedFileSizeException,
       ),
       maxAllowedFileSize: this.getValue(
-        container ? container.maxAllowedFileSize : this.maxAllowedFileSize
+        container ? container.maxAllowedFileSize : this.maxAllowedFileSize,
       ),
       maxAllowedFileSizeException: this.getValue(
         container
           ? container.maxAllowedFileSizeException
-          : this.maxAllowedFileSizeException
+          : this.maxAllowedFileSizeException,
       ),
     }).pipe(
       map((data) => {
@@ -1270,7 +1328,7 @@ export abstract class XFileUploadContainerComponent
           //
           emptyRefresh: this.emptyRefresh,
         };
-      })
+      }),
     );
   }
   //#endregion

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

@@ -16,7 +16,6 @@ import {
   isDate,
   assign,
   entries,
-  XUiEvent,
   hasChild,
   isFunction,
   parseXColor,

projects/x-framework-components/src/lib/x-ide/x-ide.typings.ts

@@ -38,6 +38,7 @@ import {
 import { forkJoin, Observable, Subject } from 'rxjs';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { XManagerService } from 'x-framework-services';
+import { XIconIdentifier } from '../x-icon/x-icon.typings';
 import { XBaseActionModel } from '../classes/x-base-action.model';
 import { XPopoverService } from '../dialogs/x-popover/x-popover.service';
 import { XTabAlign, XTabAlignIdentifier } from '../x-tabs/x-tabs.typings';
@@ -83,8 +84,7 @@ export enum XIDEAction {
 
 export type XIDEActionIdentifier = XIDEAction | string;
 
-export interface XIDEActionModel
+export interface XIDEActionModel extends XBaseActionModel<XIDEActionIdentifier> {}
-  extends XBaseActionModel<XIDEActionIdentifier> {}
 //#endregion
 
 //
@@ -520,6 +520,16 @@ export class XIDEContainer extends XBaseContainer implements IXIDEContainer {
     this.cardPropertyProvider.cardShowFooter;
   readonly cardShowActions: XStandardType<boolean> =
     this.cardPropertyProvider.cardShowActions;
+  readonly cardShowFullScreenButton: XStandardType<boolean> =
+    this.cardPropertyProvider.cardShowFullScreenButton;
+  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
+  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
+  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
+  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.cardPropertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -545,7 +555,7 @@ export class XIDEContainer extends XBaseContainer implements IXIDEContainer {
   //#region Constructor ...
   constructor(
     protected cardPropertyProvider: XComponentCardContainer,
-    protected actionBarPropertyProvider: XComponentActionBarContainer
+    protected actionBarPropertyProvider: XComponentActionBarContainer,
   ) {
     super();
   }
@@ -572,7 +582,8 @@ export class XIDEContainerComponent
   defaultTabName: XStandardType<string> = this.propertyProvider.defaultTabName;
 
   @Input()
-  hasCloseOnDefaultTab: XStandardType<boolean> = this.propertyProvider.hasCloseOnDefaultTab;
+  hasCloseOnDefaultTab: XStandardType<boolean> =
+    this.propertyProvider.hasCloseOnDefaultTab;
 
   @Input()
   theme: XStandardType<XIDEThemeIdentifier> = this.propertyProvider.theme;
@@ -691,6 +702,27 @@ export class XIDEContainerComponent
   @Input()
   cardActionProvider: Subject<XCardActionModel> =
     this.propertyProvider.cardActionProvider;
+
+  //
+  @Input()
+  cardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+
+  @Input()
+  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+
+  @Input()
+  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+
+  @Input()
+  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+
+  @Input()
+  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -735,7 +767,7 @@ export class XIDEContainerComponent
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
     protected propertyProvider: XIDEContainer,
-    protected popoverService: XPopoverService
+    protected popoverService: XPopoverService,
   ) {
     super(
       config,
@@ -744,7 +776,7 @@ export class XIDEContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -763,43 +795,43 @@ export class XIDEContainerComponent
       mode: this.getValue(container ? container.mode : this.mode),
       theme: this.getValue(container ? container.theme : this.theme),
       highlightActiveLine: this.getValue(
-        container ? container.highlightActiveLine : this.highlightActiveLine
+        container ? container.highlightActiveLine : this.highlightActiveLine,
       ),
       cssClass: this.getArrayValue(
-        container ? container.cssClass : this.cssClass
+        container ? container.cssClass : this.cssClass,
       ),
       basicAutocompletion: this.getValue(
-        container ? container.basicAutocompletion : this.basicAutocompletion
+        container ? container.basicAutocompletion : this.basicAutocompletion,
       ),
       wordWrapping: this.getValue(
-        container ? container.wordWrapping : this.wordWrapping
+        container ? container.wordWrapping : this.wordWrapping,
       ),
       showPrintMargin: this.getValue(
-        container ? container.showPrintMargin : this.showPrintMargin
+        container ? container.showPrintMargin : this.showPrintMargin,
       ),
       showLineNumbers: this.getValue(
-        container ? container.showLineNumbers : this.showLineNumbers
+        container ? container.showLineNumbers : this.showLineNumbers,
       ),
       showFoldWidgets: this.getValue(
-        container ? container.showFoldWidgets : this.showFoldWidgets
+        container ? container.showFoldWidgets : this.showFoldWidgets,
       ),
       defaultTabName: this.getValue(
-        container ? container.defaultTabName : this.defaultTabName
+        container ? container.defaultTabName : this.defaultTabName,
       ),
       hasCloseOnDefaultTab: this.getValue(
-        container ? container.hasCloseOnDefaultTab : this.hasCloseOnDefaultTab
+        container ? container.hasCloseOnDefaultTab : this.hasCloseOnDefaultTab,
       ),
 
       //
       //#region Tabs ...
       alignTabs: this.getValue(
-        container ? container.alignTabs : this.alignTabs
+        container ? container.alignTabs : this.alignTabs,
       ),
       tabHeaderColor: this.getValue(
-        container ? container.tabHeaderColor : this.tabHeaderColor
+        container ? container.tabHeaderColor : this.tabHeaderColor,
       ),
       activeTabColor: this.getValue(
-        container ? container.activeTabColor : this.activeTabColor
+        container ? container.activeTabColor : this.activeTabColor,
       ),
       //#endregion
 
@@ -808,62 +840,87 @@ export class XIDEContainerComponent
       defaultActionBarItemColor: this.getValue(
         container
           ? container.defaultActionBarItemColor
-          : this.defaultActionBarItemColor
+          : this.defaultActionBarItemColor,
       ),
       availableActionBarItems: this.getArrayValue(
         container
           ? container.availableActionBarItems
-          : this.availableActionBarItems
+          : this.availableActionBarItems,
       ),
       //#endregion
 
       //
       //#region XComponentCard ...
       cardCssClass: this.getArrayValue(
-        container ? container.cardCssClass : this.cardCssClass
+        container ? container.cardCssClass : this.cardCssClass,
       ),
       isInPage: this.getValue(container ? container.isInPage : this.isInPage),
       wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard
+        container ? container.wrapWithCard : this.wrapWithCard,
       ),
       cardShowFooter: this.getValue(
-        container ? container.cardShowFooter : this.cardShowFooter
+        container ? container.cardShowFooter : this.cardShowFooter,
       ),
       cardShowActions: this.getValue(
-        container ? container.cardShowActions : this.cardShowActions
+        container ? container.cardShowActions : this.cardShowActions,
       ),
       cardColor: this.getValue(
-        container ? container.cardColor : this.cardColor
+        container ? container.cardColor : this.cardColor,
       ),
       cardForegroundColor: this.getValue(
-        container ? container.cardForegroundColor : this.cardForegroundColor
+        container ? container.cardForegroundColor : this.cardForegroundColor,
       ),
       cardTitle: this.getValue(
-        container ? container.cardTitle : this.cardTitle
+        container ? container.cardTitle : this.cardTitle,
       ),
       cardSubTitle: this.getValue(
-        container ? container.cardSubTitle : this.cardSubTitle
+        container ? container.cardSubTitle : this.cardSubTitle,
+      ),
+      cardShowFullScreenButton: this.getValue(
+        container
+          ? container.cardShowFullScreenButton
+          : this.cardShowFullScreenButton,
+      ),
+      cardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonIcon
+          : this.cardEnterFullScreenButtonIcon,
+      ),
+      cardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardEnterFullScreenButtonColor
+          : this.cardEnterFullScreenButtonColor,
+      ),
+      cardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonIcon
+          : this.cardExitFullScreenButtonIcon,
+      ),
+      cardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.cardExitFullScreenButtonColor
+          : this.cardExitFullScreenButtonColor,
       ),
       //#endregion
 
       //
       //#region XComponentActionBar ...
       showActionBar: this.getValue(
-        container ? container.showActionBar : this.showActionBar
+        container ? container.showActionBar : this.showActionBar,
       ),
       actionBarCssClass: this.getValue(
-        container ? container.actionBarCssClass : this.actionBarCssClass
+        container ? container.actionBarCssClass : this.actionBarCssClass,
       ),
       actionBarColor: this.getValue(
-        container ? container.actionBarColor : this.actionBarColor
+        container ? container.actionBarColor : this.actionBarColor,
       ),
       actionBarForegroundColor: this.getValue(
         container
           ? container.actionBarForegroundColor
-          : this.actionBarForegroundColor
+          : this.actionBarForegroundColor,
       ),
       actionBarActions: this.getValue(
-        container ? container.actionBarActions : this.actionBarActions
+        container ? container.actionBarActions : this.actionBarActions,
       ),
       //#endregion
     }).pipe(
@@ -891,7 +948,7 @@ export class XIDEContainerComponent
           contentChange: this.contentChange,
           actionBarActionFired: this.actionBarActionFired,
         };
-      })
+      }),
     );
   }
   //#endregion

projects/x-framework-components/src/lib/x-list/x-list.typings.ts

@@ -103,12 +103,11 @@ export enum XListAction {
 
 export type XListActionIdentifier = XListAction | string;
 
-export interface XListActionModel
+export interface XListActionModel extends XBaseActionModel<XListActionIdentifier> {}
-  extends XBaseActionModel<XListActionIdentifier> {}
 
 export type XListFilteringHandler = (
   query: string,
-  source: XListItem<any>[]
+  source: XListItem<any>[],
 ) => XStandardType<XListItem<any>[]>;
 
 export function itemToJson(item: any) {
@@ -117,7 +116,7 @@ export function itemToJson(item: any) {
 
 export const defaultListFilteringHandler: XListFilteringHandler = (
   query: string,
-  items: XListItem<any>[]
+  items: XListItem<any>[],
 ) => {
   //
   if (!query || !hasChild(items)) {
@@ -126,7 +125,7 @@ export const defaultListFilteringHandler: XListFilteringHandler = (
 
   //
   const result = items.filter((i) =>
-    toNormalString(itemToJson(i.data)).includes(toNormalString(query))
+    toNormalString(itemToJson(i.data)).includes(toNormalString(query)),
   );
 
   //
@@ -336,7 +335,8 @@ export abstract class XListContainerComponent
   itemSelected: EventEmitter<XListItem<any>> = new EventEmitter();
 
   @Output()
-  optionSelected: EventEmitter<XListItemOptionSelectedEvent> = new EventEmitter();
+  optionSelected: EventEmitter<XListItemOptionSelectedEvent> =
+    new EventEmitter();
 
   @Input()
   confirmRemove: XStandardType<boolean> = this.propertyProvider.confirmRemove;
@@ -379,7 +379,7 @@ export abstract class XListContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XListContainer
+    protected propertyProvider: XListContainer,
   ) {
     super(
       config,
@@ -389,7 +389,7 @@ export abstract class XListContainerComponent
       ruler,
       zone,
       changeDetector,
-      propertyProvider
+      propertyProvider,
     );
   }
   //#endregion
@@ -397,7 +397,7 @@ export abstract class XListContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXListContainer
+    container?: IXListContainer,
   ): Observable<IXListContainer> {
     return super
       .extractProps(container ? container : this)
@@ -405,71 +405,73 @@ export abstract class XListContainerComponent
         concatMap((superData) => {
           return forkJoin({
             cssClass: this.getValue(
-              container ? container.cssClass : this.cssClass
+              container ? container.cssClass : this.cssClass,
             ),
             actionBarHideActions: this.getValue(
               container
                 ? container.actionBarHideActions
-                : this.actionBarHideActions
+                : this.actionBarHideActions,
             ),
             useDefaultActions: this.getValue(
-              container ? container.useDefaultActions : this.useDefaultActions
+              container ? container.useDefaultActions : this.useDefaultActions,
             ),
             showToolbar: this.getValue(
-              container ? container.showToolbar : this.showToolbar
+              container ? container.showToolbar : this.showToolbar,
             ),
             stickyToolbar: this.getValue(
-              container ? container.stickyToolbar : this.stickyToolbar
+              container ? container.stickyToolbar : this.stickyToolbar,
             ),
             color: this.getValue(container ? container.color : this.color),
             foregroundColor: this.getValue(
-              container ? container.foregroundColor : this.foregroundColor
+              container ? container.foregroundColor : this.foregroundColor,
             ),
             enableReordering: this.getValue(
-              container ? container.enableReordering : this.enableReordering
+              container ? container.enableReordering : this.enableReordering,
             ),
             showDivider: this.getValue(
-              container ? container.showDivider : this.showDivider
+              container ? container.showDivider : this.showDivider,
             ),
             showOptionsAsSlide: this.getValue(
-              container ? container.showOptionsAsSlide : this.showOptionsAsSlide
+              container
+                ? container.showOptionsAsSlide
+                : this.showOptionsAsSlide,
             ),
             closeOptionsAfterSelect: this.getValue(
               container
                 ? container.closeOptionsAfterSelect
-                : this.closeOptionsAfterSelect
+                : this.closeOptionsAfterSelect,
             ),
             showOptionsAsMenu: this.getValue(
-              container ? container.showOptionsAsMenu : this.showOptionsAsMenu
+              container ? container.showOptionsAsMenu : this.showOptionsAsMenu,
             ),
             selectableItems: this.getValue(
-              container ? container.selectableItems : this.selectableItems
+              container ? container.selectableItems : this.selectableItems,
             ),
             clickableItems: this.getValue(
-              container ? container.clickableItems : this.clickableItems
+              container ? container.clickableItems : this.clickableItems,
             ),
             itemTemplate: this.getValue(
-              container ? container.itemTemplate : this.itemTemplate
+              container ? container.itemTemplate : this.itemTemplate,
             ),
             slidingOptionTemplate: this.getValue(
               container
                 ? container.slidingOptionTemplate
-                : this.slidingOptionTemplate
+                : this.slidingOptionTemplate,
             ),
             nonSlidingOptionTemplate: this.getValue(
               container
                 ? container.nonSlidingOptionTemplate
-                : this.nonSlidingOptionTemplate
+                : this.nonSlidingOptionTemplate,
             ),
             confirmRemove: this.getValue(
-              container ? container.confirmRemove : this.confirmRemove
+              container ? container.confirmRemove : this.confirmRemove,
             ),
             items: this.getValue(container ? container.items : this.items),
             showItemOptions: this.getValue(
-              container ? container.showItemOptions : this.showItemOptions
+              container ? container.showItemOptions : this.showItemOptions,
             ),
             filteringHandler: this.getValue(
-              container ? container.filteringHandler : this.filteringHandler
+              container ? container.filteringHandler : this.filteringHandler,
             ),
           }).pipe(
             map((data) => {
@@ -477,9 +479,9 @@ export abstract class XListContainerComponent
                 superData,
                 data,
               };
-            })
+            }),
           );
-        })
+        }),
       )
       .pipe(
         map((info) => {
@@ -503,7 +505,7 @@ export abstract class XListContainerComponent
             selectionChanged: this.selectionChanged,
             orderChanged: this.orderChanged,
           };
-        })
+        }),
       );
   }
   //#endregion
@@ -519,8 +521,7 @@ type TXComponentListContainer = {
 };
 
 export interface IXComponentListContainer
-  extends TXComponentListContainer,
+  extends TXComponentListContainer, IXBaseComponentContainer {
-    IXBaseComponentContainer {
   showList: XStandardType<boolean>;
 }
 
@@ -632,6 +633,16 @@ export class XComponentListContainer
     this.propertyProvider.cardSubTitle;
   readonly listCardCssClass: XStandardType<XOneOrManyType<string>> =
     this.propertyProvider.cardCssClass;
+  readonly listCardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.cardShowFullScreenButton;
+  readonly listCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonIcon;
+  readonly listCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardEnterFullScreenButtonColor;
+  readonly listCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonIcon;
+  readonly listCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.cardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -869,7 +880,8 @@ export abstract class XComponentListContainerComponent
   listItemSelected: EventEmitter<XListItem<any>> = new EventEmitter();
 
   @Output()
-  listOptionSelected: EventEmitter<XListItemOptionSelectedEvent> = new EventEmitter();
+  listOptionSelected: EventEmitter<XListItemOptionSelectedEvent> =
+    new EventEmitter();
 
   @Input()
   listConfirmRemove: XStandardType<boolean> =
@@ -940,6 +952,26 @@ export abstract class XComponentListContainerComponent
   @Input()
   listCardCssClass: XStandardType<XOneOrManyType<string>> =
     this.propertyProvider.listCardCssClass;
+
+  @Input()
+  listCardShowFullScreenButton: XStandardType<boolean> =
+    this.propertyProvider.listCardShowFullScreenButton;
+
+  @Input()
+  listCardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.listCardEnterFullScreenButtonIcon;
+
+  @Input()
+  listCardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.listCardEnterFullScreenButtonColor;
+
+  @Input()
+  listCardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
+    this.propertyProvider.listCardExitFullScreenButtonIcon;
+
+  @Input()
+  listCardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.listCardExitFullScreenButtonColor;
   //#endregion
 
   //
@@ -1028,7 +1060,8 @@ export abstract class XComponentListContainerComponent
 
   //
   @Output()
-  listActionBarActionFired: EventEmitter<XActionBarActionFiredModel> = new EventEmitter<XActionBarActionFiredModel>();
+  listActionBarActionFired: EventEmitter<XActionBarActionFiredModel> =
+    new EventEmitter<XActionBarActionFiredModel>();
   //#endregion
 
   //
@@ -1153,7 +1186,7 @@ export abstract class XComponentListContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentListContainer
+    protected propertyProvider: XComponentListContainer,
   ) {
     super(
       config,
@@ -1162,7 +1195,7 @@ export abstract class XComponentListContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -1170,266 +1203,303 @@ export abstract class XComponentListContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXComponentListContainer
+    container?: IXComponentListContainer,
   ): Observable<IXComponentListContainer> {
     return forkJoin({
       //
       showList: this.getValue(container ? container.showList : this.showList),
       listCssClass: this.getValue(
-        container ? container.listCssClass : this.listCssClass
+        container ? container.listCssClass : this.listCssClass,
       ),
       listActionBarHideActions: this.getValue(
         container
           ? container.listActionBarHideActions
-          : this.listActionBarHideActions
+          : this.listActionBarHideActions,
       ),
       listUseDefaultActions: this.getValue(
-        container ? container.listUseDefaultActions : this.listUseDefaultActions
+        container
+          ? container.listUseDefaultActions
+          : this.listUseDefaultActions,
       ),
       listShowToolbar: this.getValue(
-        container ? container.listShowToolbar : this.listShowToolbar
+        container ? container.listShowToolbar : this.listShowToolbar,
       ),
       listStickyToolbar: this.getValue(
-        container ? container.listStickyToolbar : this.listStickyToolbar
+        container ? container.listStickyToolbar : this.listStickyToolbar,
       ),
       listColor: this.getValue(
-        container ? container.listColor : this.listColor
+        container ? container.listColor : this.listColor,
       ),
       listForegroundColor: this.getValue(
-        container ? container.listForegroundColor : this.listForegroundColor
+        container ? container.listForegroundColor : this.listForegroundColor,
       ),
       listEnableReordering: this.getValue(
-        container ? container.listEnableReordering : this.listEnableReordering
+        container ? container.listEnableReordering : this.listEnableReordering,
       ),
       listShowDivider: this.getValue(
-        container ? container.listShowDivider : this.listShowDivider
+        container ? container.listShowDivider : this.listShowDivider,
       ),
       listShowOptionsAsSlide: this.getValue(
         container
           ? container.listShowOptionsAsSlide
-          : this.listShowOptionsAsSlide
+          : this.listShowOptionsAsSlide,
       ),
       listCloseOptionsAfterSelect: this.getValue(
         container
           ? container.listCloseOptionsAfterSelect
-          : this.listCloseOptionsAfterSelect
+          : this.listCloseOptionsAfterSelect,
       ),
       listShowOptionsAsMenu: this.getValue(
-        container ? container.listShowOptionsAsMenu : this.listShowOptionsAsMenu
+        container
+          ? container.listShowOptionsAsMenu
+          : this.listShowOptionsAsMenu,
       ),
       listSelectableItems: this.getValue(
-        container ? container.listSelectableItems : this.listSelectableItems
+        container ? container.listSelectableItems : this.listSelectableItems,
       ),
       listClickableItems: this.getValue(
-        container ? container.listClickableItems : this.listClickableItems
+        container ? container.listClickableItems : this.listClickableItems,
       ),
       listItemTemplate: this.getValue(
-        container ? container.listItemTemplate : this.listItemTemplate
+        container ? container.listItemTemplate : this.listItemTemplate,
       ),
       listSlidingOptionTemplate: this.getValue(
         container
           ? container.listSlidingOptionTemplate
-          : this.listSlidingOptionTemplate
+          : this.listSlidingOptionTemplate,
       ),
       listNonSlidingOptionTemplate: this.getValue(
         container
           ? container.listNonSlidingOptionTemplate
-          : this.listNonSlidingOptionTemplate
+          : this.listNonSlidingOptionTemplate,
       ),
       listConfirmRemove: this.getValue(
-        container ? container.listConfirmRemove : this.listConfirmRemove
+        container ? container.listConfirmRemove : this.listConfirmRemove,
       ),
       listItems: this.getValue(
-        container ? container.listItems : this.listItems
+        container ? container.listItems : this.listItems,
       ),
       listShowItemOptions: this.getValue(
-        container ? container.listShowItemOptions : this.listShowItemOptions
+        container ? container.listShowItemOptions : this.listShowItemOptions,
       ),
       listFilteringHandler: this.getValue(
-        container ? container.listFilteringHandler : this.listFilteringHandler
+        container ? container.listFilteringHandler : this.listFilteringHandler,
       ),
       listIsInPage: this.getValue(
-        container ? container.listIsInPage : this.listIsInPage
+        container ? container.listIsInPage : this.listIsInPage,
       ),
       listWrapWithCard: this.getValue(
-        container ? container.listWrapWithCard : this.listWrapWithCard
+        container ? container.listWrapWithCard : this.listWrapWithCard,
       ),
       listCardShowFooter: this.getValue(
-        container ? container.listCardShowFooter : this.listCardShowFooter
+        container ? container.listCardShowFooter : this.listCardShowFooter,
       ),
       listCardShowActions: this.getValue(
-        container ? container.listCardShowActions : this.listCardShowActions
+        container ? container.listCardShowActions : this.listCardShowActions,
       ),
       listCardColor: this.getValue(
-        container ? container.listCardColor : this.listCardColor
+        container ? container.listCardColor : this.listCardColor,
       ),
       listCardForegroundColor: this.getValue(
         container
           ? container.listCardForegroundColor
-          : this.listCardForegroundColor
+          : this.listCardForegroundColor,
       ),
       listCardTitle: this.getValue(
-        container ? container.listCardTitle : this.listCardTitle
+        container ? container.listCardTitle : this.listCardTitle,
       ),
       listCardSubTitle: this.getValue(
-        container ? container.listCardSubTitle : this.listCardSubTitle
+        container ? container.listCardSubTitle : this.listCardSubTitle,
       ),
       listCardCssClass: this.getValue(
-        container ? container.listCardCssClass : this.listCardCssClass
+        container ? container.listCardCssClass : this.listCardCssClass,
+      ),
+      listCardShowFullScreenButton: this.getValue(
+        container
+          ? container.listCardShowFullScreenButton
+          : this.listCardShowFullScreenButton,
+      ),
+      listCardEnterFullScreenButtonIcon: this.getValue(
+        container
+          ? container.listCardEnterFullScreenButtonIcon
+          : this.listCardEnterFullScreenButtonIcon,
+      ),
+      listCardEnterFullScreenButtonColor: this.getValue(
+        container
+          ? container.listCardEnterFullScreenButtonColor
+          : this.listCardEnterFullScreenButtonColor,
+      ),
+      listCardExitFullScreenButtonIcon: this.getValue(
+        container
+          ? container.listCardExitFullScreenButtonIcon
+          : this.listCardExitFullScreenButtonIcon,
+      ),
+      listCardExitFullScreenButtonColor: this.getValue(
+        container
+          ? container.listCardExitFullScreenButtonColor
+          : this.listCardExitFullScreenButtonColor,
       ),
       listShowEmpty: this.getValue(
-        container ? container.listShowEmpty : this.listShowEmpty
+        container ? container.listShowEmpty : this.listShowEmpty,
       ),
       listEmptyHasRefresh: this.getValue(
-        container ? container.listEmptyHasRefresh : this.listEmptyHasRefresh
+        container ? container.listEmptyHasRefresh : this.listEmptyHasRefresh,
       ),
       listEmptyCssClass: this.getValue(
-        container ? container.listEmptyCssClass : this.listEmptyCssClass
+        container ? container.listEmptyCssClass : this.listEmptyCssClass,
       ),
       listEmptyColor: this.getValue(
-        container ? container.listEmptyColor : this.listEmptyColor
+        container ? container.listEmptyColor : this.listEmptyColor,
       ),
       listEmptyForegroundColor: this.getValue(
         container
           ? container.listEmptyForegroundColor
-          : this.listEmptyForegroundColor
+          : this.listEmptyForegroundColor,
       ),
       listEmptyMessageColor: this.getValue(
-        container ? container.listEmptyMessageColor : this.listEmptyMessageColor
+        container
+          ? container.listEmptyMessageColor
+          : this.listEmptyMessageColor,
       ),
       listEmptyForegroundMessageColor: this.getValue(
         container
           ? container.listEmptyForegroundMessageColor
-          : this.listEmptyForegroundMessageColor
+          : this.listEmptyForegroundMessageColor,
       ),
       listEmptyRefreshButtonColor: this.getValue(
         container
           ? container.listEmptyRefreshButtonColor
-          : this.listEmptyRefreshButtonColor
+          : this.listEmptyRefreshButtonColor,
       ),
       listEmptyForegroundRefreshButtonColor: this.getValue(
         container
           ? container.listEmptyForegroundRefreshButtonColor
-          : this.listEmptyForegroundRefreshButtonColor
+          : this.listEmptyForegroundRefreshButtonColor,
       ),
       listEmptyMessage: this.getValue(
-        container ? container.listEmptyMessage : this.listEmptyMessage
+        container ? container.listEmptyMessage : this.listEmptyMessage,
       ),
       listEmptyRefreshIcon: this.getValue(
-        container ? container.listEmptyRefreshIcon : this.listEmptyRefreshIcon
+        container ? container.listEmptyRefreshIcon : this.listEmptyRefreshIcon,
       ),
       listShowActionBar: this.getValue(
-        container ? container.listShowActionBar : this.listShowActionBar
+        container ? container.listShowActionBar : this.listShowActionBar,
       ),
       listActionBarCssClass: this.getValue(
-        container ? container.listActionBarCssClass : this.listActionBarCssClass
+        container
+          ? container.listActionBarCssClass
+          : this.listActionBarCssClass,
       ),
       listActionBarColor: this.getValue(
-        container ? container.listActionBarColor : this.listActionBarColor
+        container ? container.listActionBarColor : this.listActionBarColor,
       ),
       listActionBarForegroundColor: this.getValue(
         container
           ? container.listActionBarForegroundColor
-          : this.listActionBarForegroundColor
+          : this.listActionBarForegroundColor,
       ),
       listActionBarActions: this.getValue(
-        container ? container.listActionBarActions : this.listActionBarActions
+        container ? container.listActionBarActions : this.listActionBarActions,
       ),
       listShowSearchBar: this.getValue(
-        container ? container.listShowSearchBar : this.listShowSearchBar
+        container ? container.listShowSearchBar : this.listShowSearchBar,
       ),
       listSearchBarCssClass: this.getValue(
-        container ? container.listSearchBarCssClass : this.listSearchBarCssClass
+        container
+          ? container.listSearchBarCssClass
+          : this.listSearchBarCssClass,
       ),
       listSearchBarColor: this.getValue(
-        container ? container.listSearchBarColor : this.listSearchBarColor
+        container ? container.listSearchBarColor : this.listSearchBarColor,
       ),
       listSearchBarForegroundColor: this.getValue(
         container
           ? container.listSearchBarForegroundColor
-          : this.listSearchBarForegroundColor
+          : this.listSearchBarForegroundColor,
       ),
       listSearchBarSearchInputColor: this.getValue(
         container
           ? container.listSearchBarSearchInputColor
-          : this.listSearchBarSearchInputColor
+          : this.listSearchBarSearchInputColor,
       ),
       listSearchBarForegroundSearchInputColor: this.getValue(
         container
           ? container.listSearchBarForegroundSearchInputColor
-          : this.listSearchBarForegroundSearchInputColor
+          : this.listSearchBarForegroundSearchInputColor,
       ),
       listSearchBarType: this.getValue(
-        container ? container.listSearchBarType : this.listSearchBarType
+        container ? container.listSearchBarType : this.listSearchBarType,
       ),
       listSearchBarTitle: this.getValue(
-        container ? container.listSearchBarTitle : this.listSearchBarTitle
+        container ? container.listSearchBarTitle : this.listSearchBarTitle,
       ),
       listSearchBarValue: this.getValue(
-        container ? container.listSearchBarValue : this.listSearchBarValue
+        container ? container.listSearchBarValue : this.listSearchBarValue,
       ),
       listSearchBarEnterKeyHint: this.getValue(
         container
           ? container.listSearchBarEnterKeyHint
-          : this.listSearchBarEnterKeyHint
+          : this.listSearchBarEnterKeyHint,
       ),
       listSearchBarKeyboardType: this.getValue(
         container
           ? container.listSearchBarKeyboardType
-          : this.listSearchBarKeyboardType
+          : this.listSearchBarKeyboardType,
       ),
       listSearchBarSpellcheck: this.getValue(
         container
           ? container.listSearchBarSpellcheck
-          : this.listSearchBarSpellcheck
+          : this.listSearchBarSpellcheck,
       ),
       listSearchBarDebounce: this.getValue(
-        container ? container.listSearchBarDebounce : this.listSearchBarDebounce
+        container
+          ? container.listSearchBarDebounce
+          : this.listSearchBarDebounce,
       ),
       listSearchBarShowCancelButton: this.getValue(
         container
           ? container.listSearchBarShowCancelButton
-          : this.listSearchBarShowCancelButton
+          : this.listSearchBarShowCancelButton,
       ),
       listSearchBarCancelButtonIcon: this.getValue(
         container
           ? container.listSearchBarCancelButtonIcon
-          : this.listSearchBarCancelButtonIcon
+          : this.listSearchBarCancelButtonIcon,
       ),
       listSearchBarCancelButtonTitle: this.getValue(
         container
           ? container.listSearchBarCancelButtonTitle
-          : this.listSearchBarCancelButtonTitle
+          : this.listSearchBarCancelButtonTitle,
       ),
       listSearchBarCancelButtonIconColor: this.getValue(
         container
           ? container.listSearchBarCancelButtonIconColor
-          : this.listSearchBarCancelButtonIconColor
+          : this.listSearchBarCancelButtonIconColor,
       ),
       listSearchBarShowClearButton: this.getValue(
         container
           ? container.listSearchBarShowClearButton
-          : this.listSearchBarShowClearButton
+          : this.listSearchBarShowClearButton,
       ),
       listSearchBarClearButtonIcon: this.getValue(
         container
           ? container.listSearchBarClearButtonIcon
-          : this.listSearchBarClearButtonIcon
+          : this.listSearchBarClearButtonIcon,
       ),
       listSearchBarClearButtonIconColor: this.getValue(
         container
           ? container.listSearchBarClearButtonIconColor
-          : this.listSearchBarClearButtonIconColor
+          : this.listSearchBarClearButtonIconColor,
       ),
       listSearchBarSearchButtonIcon: this.getValue(
         container
           ? container.listSearchBarSearchButtonIcon
-          : this.listSearchBarSearchButtonIcon
+          : this.listSearchBarSearchButtonIcon,
       ),
       listSearchBarSearchButtonIconColor: this.getValue(
         container
           ? container.listSearchBarSearchButtonIconColor
-          : this.listSearchBarSearchButtonIconColor
+          : this.listSearchBarSearchButtonIconColor,
       ),
     }).pipe(
       map((data) => {
@@ -1478,7 +1548,7 @@ export abstract class XComponentListContainerComponent
           listSearchBarQueryChange: this.listSearchBarQueryChange,
           listSearchBarOnEvent: this.listSearchBarOnEvent,
         };
-      })
+      }),
     );
   }
   //#endregion