add color properties has issues ...

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

@@ -89,18 +89,6 @@ 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
 
   //
@@ -193,27 +181,6 @@ 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
 
   //
@@ -329,31 +296,6 @@ 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
 
       //
@@ -460,16 +402,6 @@ 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
 
   //
@@ -548,27 +480,6 @@ 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
 
   //
@@ -657,31 +568,6 @@ 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,7 +48,9 @@ export interface IXMaxAllowedFilesContainer {
 @Injectable({
   providedIn: 'root',
 })
-export class XMaxAllowedFilesContainer implements Readonly<IXMaxAllowedFilesContainer> {
+export class XMaxAllowedFilesContainer
+  implements Readonly<IXMaxAllowedFilesContainer>
+{
   //
   //#region Props ...
   readonly maxAllowedFiles: XStandardType<number> = this.config.maxUploadFiles;
@@ -61,7 +63,7 @@ export class XMaxAllowedFilesContainer implements Readonly<IXMaxAllowedFilesCont
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
   ) {}
   //#endregion
 }
@@ -77,7 +79,9 @@ export interface IXMaxAllowedSizeContainer {
 @Injectable({
   providedIn: 'root',
 })
-export class XMaxAllowedSizeContainer implements Readonly<IXMaxAllowedSizeContainer> {
+export class XMaxAllowedSizeContainer
+  implements Readonly<IXMaxAllowedSizeContainer>
+{
   //
   //#region Props ...
   readonly maxAllowedSize: XStandardType<number> = this.config.maxAllowedSize;
@@ -90,7 +94,7 @@ export class XMaxAllowedSizeContainer implements Readonly<IXMaxAllowedSizeContai
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
   ) {}
   //#endregion
 }
@@ -106,7 +110,9 @@ export interface IXMinAllowedFileSizeContainer {
 @Injectable({
   providedIn: 'root',
 })
-export class XMinAllowedFileSizeContainer implements Readonly<IXMinAllowedFileSizeContainer> {
+export class XMinAllowedFileSizeContainer
+  implements Readonly<IXMinAllowedFileSizeContainer>
+{
   //
   //#region Props ...
   readonly minAllowedFileSize: XStandardType<number> =
@@ -120,7 +126,7 @@ export class XMinAllowedFileSizeContainer implements Readonly<IXMinAllowedFileSi
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
   ) {}
   //#endregion
 }
@@ -136,7 +142,9 @@ export interface IXMaxAllowedFileSizeContainer {
 @Injectable({
   providedIn: 'root',
 })
-export class XMaxAllowedFileSizeContainer implements Readonly<IXMaxAllowedFileSizeContainer> {
+export class XMaxAllowedFileSizeContainer
+  implements Readonly<IXMaxAllowedFileSizeContainer>
+{
   //
   //#region Props ...
   readonly maxAllowedFileSize: XStandardType<number> =
@@ -150,7 +158,7 @@ export class XMaxAllowedFileSizeContainer implements Readonly<IXMaxAllowedFileSi
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
   ) {}
   //#endregion
 }
@@ -183,7 +191,7 @@ export class XFileRegularContainer implements Readonly<IXFileRegularContainer> {
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
   ) {}
   //#endregion
 }
@@ -246,7 +254,7 @@ export class XFileContainer implements Readonly<IXFileContainer> {
   //#region Constructor ...
   constructor(
     @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
-    private config: XFrameworkComponentsConfig,
+    private config: XFrameworkComponentsConfig
   ) {}
   //#endregion
 }
@@ -331,7 +339,7 @@ export abstract class XFileContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XFileContainer,
+    protected propertyProvider: XFileContainer
   ) {
     super(
       config,
@@ -340,7 +348,7 @@ export abstract class XFileContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -348,52 +356,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) => {
@@ -403,7 +411,7 @@ export abstract class XFileContainerComponent
 
           //
         };
-      }),
+      })
     );
   }
   //#endregion
@@ -446,16 +454,6 @@ 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
 
   //
@@ -503,7 +501,7 @@ export class XCardFileContainer
   //#region Constructor ...
   constructor(
     protected cardPropertyProvider: XComponentCardContainer,
-    protected filePropertyProvider: XFileContainer,
+    protected filePropertyProvider: XFileContainer
   ) {
     super();
   }
@@ -558,26 +556,6 @@ 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
 
   //
@@ -643,7 +621,7 @@ export class XCardFileContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardFileContainer,
+    protected propertyProvider: XCardFileContainer
   ) {
     super(
       config,
@@ -652,7 +630,7 @@ export class XCardFileContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -660,107 +638,82 @@ 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(
@@ -774,7 +727,7 @@ export class XCardFileContainerComponent
             ? container.cardActionProvider
             : this.cardActionProvider,
         };
-      }),
+      })
     );
   }
   //#endregion
@@ -787,7 +740,8 @@ export class XCardFileContainerComponent
 type TXCardFileFileDropContainer = IXComponentCardContainer &
   IXFileContainer &
   IXComponentFileDropAreaContainer;
-export interface IXCardFileFileDropContainer extends TXCardFileFileDropContainer {}
+export interface IXCardFileFileDropContainer
+  extends TXCardFileFileDropContainer {}
 
 //
 @Injectable({
@@ -821,16 +775,6 @@ 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
 
   //
@@ -955,16 +899,6 @@ 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
@@ -974,7 +908,7 @@ export class XCardFileFileDropContainer
   constructor(
     protected cardPropertyProvider: XComponentCardContainer,
     protected fileDropPropertyProvider: XComponentFileDropAreaContainer,
-    protected filePropertyProvider: XFileContainer,
+    protected filePropertyProvider: XFileContainer
   ) {
     super();
   }
@@ -1029,26 +963,6 @@ 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
 
   //
@@ -1217,26 +1131,6 @@ 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
@@ -1252,7 +1146,7 @@ export class XCardFileFileDropContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardFileFileDropContainer,
+    protected propertyProvider: XCardFileFileDropContainer
   ) {
     super(
       config,
@@ -1261,7 +1155,7 @@ export class XCardFileFileDropContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -1269,107 +1163,82 @@ 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
 
@@ -1377,132 +1246,103 @@ 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 ? container.fileDropAreaCardColor : this.fileDropAreaCardColor
-          ? container.fileDropAreaCardColor
-          : this.fileDropAreaCardColor,
       ),
       fileDropAreaCardForegroundColor: this.getValue(
         container
           ? container.fileDropAreaCardForegroundColor
-          : this.fileDropAreaCardForegroundColor,
+          : this.fileDropAreaCardForegroundColor
       ),
       fileDropAreaCardTitle: this.getValue(
-        container
+        container ? container.fileDropAreaCardTitle : this.fileDropAreaCardTitle
-          ? 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(
@@ -1529,7 +1369,7 @@ export class XCardFileFileDropContainerComponent
           //
           fileDropAreaFilesChangeEmiter: this.fileDropAreaFilesChangeEmiter,
         };
-      }),
+      })
     );
   }
   //#endregion

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

@@ -32,7 +32,6 @@ 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';
@@ -275,7 +274,7 @@ export abstract class XNextPrevResetHostContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XNextPrevResetHostContainer,
+    protected propertyProvider: XNextPrevResetHostContainer
   ) {
     super(
       config,
@@ -284,7 +283,7 @@ export abstract class XNextPrevResetHostContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -292,7 +291,7 @@ export abstract class XNextPrevResetHostContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXNextPrevResetHostContainer,
+    container?: IXNextPrevResetHostContainer
   ): Observable<IXNextPrevResetHostContainer> {
     return forkJoin({
       //
@@ -310,7 +309,7 @@ export abstract class XNextPrevResetHostContainerComponent
           onPrev: this.onPrev,
           onReset: this.onReset,
         };
-      }),
+      })
     );
   }
   //#endregion
@@ -322,7 +321,8 @@ export abstract class XNextPrevResetHostContainerComponent
 //
 type TXCardEmptyContainer = IXComponentCardContainer &
   IXNextPrevResetHostContainer;
-export interface IXCardNextPrevResetHostContainer extends TXCardEmptyContainer {}
+export interface IXCardNextPrevResetHostContainer
+  extends TXCardEmptyContainer {}
 
 //
 @Injectable({
@@ -356,16 +356,6 @@ 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
 
   //
@@ -400,7 +390,7 @@ export class XCardNextPrevResetHostContainer
   //#region Constructor ...
   constructor(
     protected cardPropertyProvider: XComponentCardContainer,
-    protected nextPrevResetHostPropertyProvider: XNextPrevResetHostContainer,
+    protected nextPrevResetHostPropertyProvider: XNextPrevResetHostContainer
   ) {
     super();
   }
@@ -455,26 +445,6 @@ 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
 
   //
@@ -519,7 +489,7 @@ export class XCardNextPrevResetHostContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardNextPrevResetHostContainer,
+    protected propertyProvider: XCardNextPrevResetHostContainer
   ) {
     super(
       config,
@@ -528,7 +498,7 @@ export class XCardNextPrevResetHostContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -536,60 +506,35 @@ 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
 
@@ -616,7 +561,7 @@ export class XCardNextPrevResetHostContainerComponent
           onPrev: this.onPrev,
           onReset: this.onReset,
         };
-      }),
+      })
     );
   }
   //#endregion
@@ -631,7 +576,8 @@ type TXNextPrevResetContainer = IXNextContainer &
   IXResetContainer;
 // tslint:disable-next-line:no-empty-interface
 export interface IXNextPrevResetContainer
-  extends IXBaseContainer, TXNextPrevResetContainer {}
+  extends IXBaseContainer,
+    TXNextPrevResetContainer {}
 
 @Injectable({
   providedIn: 'root',
@@ -691,7 +637,7 @@ export class XNextPrevResetContainer
   constructor(
     protected prevPropertyProvider: XPrevContainer,
     protected nextPropertyProvider: XNextContainer,
-    protected resetpropertyProvider: XResetContainer,
+    protected resetpropertyProvider: XResetContainer
   ) {
     super();
   }
@@ -795,7 +741,7 @@ export abstract class XNextPrevResetContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XNextPrevResetContainer,
+    protected propertyProvider: XNextPrevResetContainer
   ) {
     super(
       config,
@@ -804,7 +750,7 @@ export abstract class XNextPrevResetContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -812,57 +758,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) => {
@@ -872,7 +818,7 @@ export abstract class XNextPrevResetContainerComponent
 
           //
         };
-      }),
+      })
     );
   }
   //#endregion
@@ -884,7 +830,8 @@ export abstract class XNextPrevResetContainerComponent
 type TXNextPrevResetAndHostContainer = IXNextPrevResetContainer &
   IXCardNextPrevResetHostContainer;
 export interface IXNextPrevResetAndHostContainer
-  extends IXBaseContainer, TXNextPrevResetAndHostContainer {}
+  extends IXBaseContainer,
+    TXNextPrevResetAndHostContainer {}
 
 @Injectable({
   providedIn: 'root',
@@ -993,16 +940,6 @@ 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
 
@@ -1010,7 +947,7 @@ export class XNextPrevResetAndHostContainer
   //#region Constructor ...
   constructor(
     protected nextPrevResetPropertyProvider: XNextPrevResetContainer,
-    protected cardNextPrevResetPropertyProvider: XCardNextPrevResetHostContainer,
+    protected cardNextPrevResetPropertyProvider: XCardNextPrevResetHostContainer
   ) {
     super();
   }
@@ -1064,26 +1001,6 @@ 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
 
   //
@@ -1206,7 +1123,7 @@ export class XNextPrevResetAndHostContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XNextPrevResetAndHostContainer,
+    protected propertyProvider: XNextPrevResetAndHostContainer
   ) {
     super(
       config,
@@ -1215,7 +1132,7 @@ export class XNextPrevResetAndHostContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -1223,60 +1140,35 @@ 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
 
@@ -1293,51 +1185,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(
@@ -1356,7 +1248,7 @@ export class XNextPrevResetAndHostContainerComponent
           onPrev: this.onPrev,
           onReset: this.onReset,
         };
-      }),
+      })
     );
   }
   //#endregion

projects/x-framework-components/src/lib/classes/x-size.model..ts

@@ -0,0 +1,4 @@
+export interface XSizeModel {
+    width?: number;
+    height?: number;
+}

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

@@ -43,11 +43,6 @@ 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>
@@ -60,21 +55,16 @@ export class XCardTestComponent extends XCardContainerComponent {}
           class="x-card"
           [showActions]="true"
           [color]="props.cardColor"
-          [isInPage]="props.isInPage"
           [ngClass]="props.cardCssClass"
+          [isInPage]="props.isInPage"
           [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,10 +6,10 @@
   [class.no-text]="isNoTextCard() | async"
   [class.page-card]="getValue(isInPage) | async"
   [isForeground]="getValue(foregroundColor) | async"
-  [class.full-screen]="getValue(isFullScreen) | async"
+  [class.fullscreen]="getValue(isFullscreen) | async"
 >
   <!-- Card Header -->
-  <mat-card-header class="x-header" *ngIf="getValue(showHeader) | async">
+  <mat-card-header #cardHeader class="x-header" *ngIf="getValue(showHeader) | async">
     <!-- Avatar Image -->
     <section
       *ngIf="notEmptyValue(avatarUrl) | async"
@@ -52,21 +52,12 @@
 
     <!-- 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 -->
   <img
     mat-card-image
+    #cardImage
     class="x-image"
     [src]="getValue(imageUrl) | async"
     *ngIf="notEmptyValue(imageUrl) | async"
@@ -74,18 +65,18 @@
   />
 
   <!-- Card Content -->
-  <mat-card-content class="x-content" *ngIf="getValue(showContent) | async">
+  <mat-card-content #cardContent class="x-content" *ngIf="getValue(showContent) | async">
     <ng-content></ng-content>
   </mat-card-content>
 
   <!-- Card Actions -->
-  <mat-card-actions class="x-actions" *ngIf="getValue(showActions) | async">
+  <mat-card-actions #cardActions class="x-actions" *ngIf="getValue(showActions) | async">
     <ng-content select="[actions]"></ng-content>
   </mat-card-actions>
 
   <!-- Card Footer -->
   <mat-card-footer
-    #footer
+    #cardFooter
     class="x-footer"
     *ngIf="getValue(showFooter) | async"
   >

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

@@ -1,6 +1,43 @@
 //
 @import "../theme/theme.scss";
 
+:host {
+  display: block;
+  width: inherit;
+  height: inherit;
+}
+
+.x-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s ease-in-out;
+  border-radius: var(--card-border-radius, 8px);
+  overflow: hidden;
+
+  &:fullscreen {
+    border-radius: 0;
+    width: 100vw;
+    height: 100vh;
+
+    .x-header {
+      padding: 16px 24px;
+    }
+
+    .x-content {
+      flex: 1;
+      overflow: auto;
+    }
+
+    .x-image {
+      max-height: 60vh;
+      object-fit: contain;
+    }
+  }
+}
+
 //
 :host::ng-deep.x-card.no-text {
   .mat-card-header-text {
@@ -16,7 +53,7 @@
   height: var(--height, inherit);
 }
 
-.x-card.page-card {
+.x-card.page-card:not(.fullscreen) {
   @include push-auto();
   @include applyWidthHeight();
   @include m-tb($d-l);
@@ -32,19 +69,6 @@
   }
 }
 
-.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

@@ -5,8 +5,18 @@ import {
 } from './x-card.typings';
 import { Subject, Subscription } from 'rxjs';
 import { concatMap, map } from 'rxjs/operators';
-import { nameof, isNullOrEmptyString } from 'x-framework-core';
+import { XSizeModel } from '../classes/x-size.model.';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  nameof,
+  isNullOrEmptyString,
+  isNullOrUndefined,
+} from 'x-framework-core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -22,21 +32,107 @@ export class XCardComponent extends XCardContainerComponent {
   private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
 
   //
-  private IS_FULL_SCREEN: boolean = false;
+  //#region Card Elements ....
-  set isFullScreen(v: boolean) {
+  private CARD_IMAGE: ElementRef<HTMLElement> = undefined;
-    //
+  private CARD_HEADER: ElementRef<HTMLElement> = undefined;
-    const isChanged = v != this.IS_FULL_SCREEN;
+  private CARD_FOOTER: ElementRef<HTMLElement> = undefined;
+  private CARD_CONTENT: ElementRef<HTMLElement> = undefined;
+  private CARD_ACTIONS: ElementRef<HTMLElement> = undefined;
 
-    //
+  @ViewChild('cardImage', { static: false })
-    this.IS_FULL_SCREEN = v;
+  set cardImage(v: ElementRef<HTMLElement>) {
+    this.CARD_IMAGE = v;
   }
-  get isFullScreen() {
+
-    return this.IS_FULL_SCREEN;
+  @ViewChild('cardHeader', { static: false })
+  set cardHeader(v: ElementRef<HTMLElement>) {
+    this.CARD_HEADER = v;
+  }
+
+  @ViewChild('cardFooter', { static: false })
+  set cardFooter(v: ElementRef<HTMLElement>) {
+    this.CARD_FOOTER = v;
+  }
+
+  @ViewChild('cardContent', { static: false })
+  set cardContent(v: ElementRef<HTMLElement>) {
+    this.CARD_CONTENT = v;
+  }
+
+  @ViewChild('cardActions', { static: false })
+  set cardActions(v: ElementRef<HTMLElement>) {
+    this.CARD_ACTIONS = v;
+  }
+
+  get cardImage() {
+    return this.CARD_IMAGE;
+  }
+
+  get cardHeader() {
+    return this.CARD_HEADER;
+  }
+
+  get cardFooter() {
+    return this.CARD_FOOTER;
+  }
+
+  get cardContent() {
+    return this.CARD_CONTENT;
+  }
+
+  get cardActions() {
+    return this.CARD_ACTIONS;
   }
   //#endregion
 
+  //
+  //#region Full Screen ...
+  //
+  private IS_FULLSCREEN: boolean = false;
+
+  set isFullscreen(v: boolean) {
+    //
+    const isChanged = v != this.IS_FULLSCREEN;
+    if (isChanged) {
+      //
+      this.actionProvider.next({
+        action: XCardAction.FullScreenToggled,
+        payload: v,
+      });
+    }
+
+    //
+    this.IS_FULLSCREEN = v;
+  }
+
+  get isFullscreen() {
+    return this.IS_FULLSCREEN;
+  }
+  //#endregion
+  //#endregion
+
   //
   //#region LifeCycles ...
+  onInit() {
+    super.onInit();
+
+    //
+    // Listen for fullscreen change events (handles ESC key and browser UI)
+    document.addEventListener('fullscreenchange', this.fullscreenChangeHandler);
+    document.addEventListener(
+      'webkitfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.addEventListener(
+      'mozfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.addEventListener(
+      'MSFullscreenChange',
+      this.fullscreenChangeHandler,
+    );
+  }
+
   onChange(changeKeys: string[]) {
     super.onChange(changeKeys);
 
@@ -57,6 +153,24 @@ export class XCardComponent extends XCardContainerComponent {
 
     //
     this.unregisterActionProvider();
+
+    //
+    document.removeEventListener(
+      'fullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'webkitfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'mozfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'MSFullscreenChange',
+      this.fullscreenChangeHandler,
+    );
   }
 
   registerViewHandlers() {
@@ -89,79 +203,183 @@ export class XCardComponent extends XCardContainerComponent {
       ),
     );
   }
-
-  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() {
+  public async enterFullscreen(options?: FullscreenOptions) {
     //
-    if (this.isFullScreen) {
+    if (this.isFullscreen) {
       return;
     }
 
     //
-    this.isFullScreen = true;
+    const element: HTMLElement = this.element?.nativeElement;
-    // this.fullScreenChanged.emit(true);
+    if (!element) {
-
-    //
-    this.detectChanges();
-  }
-
-  public async exitFullScreen() {
-    //
-    if (!this.isFullScreen) {
       return;
     }
 
     //
-    this.isFullScreen = false;
+    try {
-    // this.fullScreenChanged.emit(false);
+      //
+      if (!this.canUseFullscreen()) {
+        return;
+      }
 
-    //
+      //
-    this.detectChanges();
+      await element.requestFullscreen(options);
+
+      //
+      this.isFullscreen = true;
+      this.detectChanges();
+    } catch {}
   }
 
-  public async toggleFullScreen() {
+  public async exitFullscreen() {
     //
-    if (this.isFullScreen) {
+    if (!this.isFullscreen) {
-      await this.exitFullScreen();
+      return;
+    }
+
+    //
+    try {
+      //
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      }
+
+      //
+      this.isFullscreen = false;
+      this.detectChanges();
+    } catch {}
+  }
+
+  public async toggleFullscreen() {
+    //
+    if (this.isFullscreen) {
+      await this.exitFullscreen();
     } else {
-      await this.enterFullScreen();
+      await this.enterFullscreen();
     }
   }
+
+  //
+  //#region Size Calculating ...
+  public calculateImageSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_IMAGE) ||
+      isNullOrUndefined(this.CARD_IMAGE.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_IMAGE.nativeElement.offsetWidth,
+      height: this.CARD_IMAGE.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateHeaderSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_HEADER) ||
+      isNullOrUndefined(this.CARD_HEADER.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_HEADER.nativeElement.offsetWidth,
+      height: this.CARD_HEADER.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateFooterSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_FOOTER) ||
+      isNullOrUndefined(this.CARD_FOOTER.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_FOOTER.nativeElement.offsetWidth,
+      height: this.CARD_FOOTER.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateContentSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_CONTENT) ||
+      isNullOrUndefined(this.CARD_CONTENT.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_CONTENT.nativeElement.offsetWidth,
+      height: this.CARD_CONTENT.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateActionsSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_ACTIONS) ||
+      isNullOrUndefined(this.CARD_ACTIONS.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_ACTIONS.nativeElement.offsetWidth,
+      height: this.CARD_ACTIONS.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+  //#endregion
   //#endregion
 
   //
@@ -196,17 +414,17 @@ export class XCardComponent extends XCardContainerComponent {
 
         //
         case XCardAction.EnterFullScreen:
-          await this.enterFullScreen();
+          await this.enterFullscreen();
           break;
 
         //
         case XCardAction.ExitFullScreen:
-          await this.exitFullScreen();
+          await this.exitFullscreen();
           break;
 
         //
         case XCardAction.ToggleFullScreen:
-          await this.toggleFullScreen();
+          await this.toggleFullscreen();
           break;
       }
     });
@@ -223,5 +441,31 @@ export class XCardComponent extends XCardContainerComponent {
     this.ACTION_PROVIDER_SUBSCRIPTION = null;
   }
   //#endregion
+
+  //
+  //#region Fullscreen ...
+  private fullscreenChangeHandler = () => {
+    //
+    const isFullscreen = !!(
+      document.fullscreenElement ||
+      (document as any).webkitFullscreenElement ||
+      (document as any).mozFullScreenElement ||
+      (document as any).msFullscreenElement
+    );
+
+    //
+    this.isFullscreen = isFullscreen;
+    this.detectChanges();
+  };
+
+  private canUseFullscreen(): boolean {
+    return !!(
+      document.fullscreenEnabled ||
+      (document as any).webkitFullscreenEnabled ||
+      (document as any).mozFullScreenEnabled ||
+      (document as any).msFullscreenEnabled
+    );
+  }
+  //#endregion
   //#endregion
 }

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

@@ -1,12 +1,13 @@
 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: [XCardComponent],
+  declarations: [
-  imports: [CommonModule, XIconModule, XBaseComponentModule],
+    XCardComponent
-  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,15 +29,18 @@ 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',
+  //
+  FullScreenToggled = 'full_screen_toggled',
 }
 
 export type XCardActionIdentifier = XCardAction | string;
@@ -62,13 +65,6 @@ 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>;
@@ -107,17 +103,6 @@ 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>;
@@ -174,27 +159,6 @@ 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;
@@ -273,31 +237,6 @@ export abstract class XCardContainerComponent
         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(
@@ -348,11 +287,6 @@ type TXComponentCardContainer = {
     | 'subTitle'
     | 'showFooter'
     | 'showActions'
-    | 'showFullScreenButton'
-    | 'enterFullScreenButtonIcon'
-    | 'enterFullScreenButtonColor'
-    | 'exitFullScreenButtonIcon'
-    | 'exitFullScreenButtonColor'
   > as `card${Capitalize<string & TKey>}`]: IXCardContainer[TKey];
 };
 
@@ -398,18 +332,6 @@ 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
 
   //
@@ -470,27 +392,6 @@ 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
 
   //
@@ -550,31 +451,6 @@ export abstract class XComponentCardContainerComponent
       cardShowActions: this.getValue(
         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) => {
         return {

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

@@ -1,8 +1,10 @@
 <!-- Component Template -->
 <ng-container *ngIf="getValue(wrapWithCard) | async; else componentsRef">
   <x-card
+    #chartCard
     class="x-card"
     [showActions]="true"
+    [actionProvider]="cardActionProvider"
     [color]="getValue(cardColor) | async"
     [ngClass]="getValue(cssClass) | async"
     [isInPage]="getValue(isInPage) | async"
@@ -14,18 +16,7 @@
     [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>
@@ -52,6 +43,7 @@
   >
     <!-- Toolbar -->
     <x-action-bar
+      #chartActionBar
       [color]="actionBarColor"
       [cssClass]="actionBarCssClass"
       [actionProvider]="actionBarActionProvider"

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

@@ -2,7 +2,6 @@ import {
   Component,
   ViewChild,
   ElementRef,
-  HostListener,
   ChangeDetectionStrategy,
 } from '@angular/core';
 import {
@@ -14,24 +13,25 @@ import {
   downloadFileByUrl,
   isNullOrUndefined,
   isNullOrEmptyString,
-  downloadArrayBufferedFile,
   XColorWithBrightness,
+  downloadArrayBufferedFile,
 } from 'x-framework-core';
 import {
   isChartType,
   XChartAction,
   XChartOptions,
-  XChartSeriesType,
   XChartEventOpts,
+  XChartTextAlign,
+  XChartSeriesType,
+  isChartTextAlign,
   XChartActionBarItem,
   XChartDrilldownEvent,
   XChartContainerComponent,
   XChartStoryboardBeatInfo,
-  isChartTextAlign,
+  XChartColorFormatterOpts,
-  XChartTextAlign,
 } from './x-chart.typings';
-import { Subscription } from 'rxjs';
 import ApexCharts from 'apexcharts';
+import { Subject, Subscription } from 'rxjs';
 import {
   XActionBarItem,
   XActionBarItemSlot,
@@ -39,6 +39,8 @@ import {
 } from '../x-action-bar/x-action-bar.typings';
 import { XIconNames } from '../x-icon/x-icon.typings';
 import { XCardAction } from '../x-card/x-card.typings';
+import { XCardComponent } from '../x-card/x-card.component';
+import { XActionBarComponent } from '../x-action-bar/x-action-bar.component';
 
 @Component({
   selector: 'x-chart',
@@ -50,39 +52,70 @@ export class XChartComponent extends XChartContainerComponent {
   //
   //#region Props ...
   //
-  private CHART_CONTAINER: ElementRef | undefined;
+  //#region Chart Container ...
+  //
+  private CHART_CONTAINER: ElementRef = undefined;
 
   @ViewChild('chartContainer', { static: false })
-  set chartContainer(el: ElementRef | undefined) {
+  set chartContainer(v: ElementRef) {
     //
-    if (isNullOrUndefined(el)) {
+    if (isNullOrUndefined(v)) {
       //
       this.destroyComponent();
       return;
     }
 
     //
-    this.CHART_CONTAINER = el;
+    this.CHART_CONTAINER = v;
     this.initializeComponent();
   }
 
   get chartContainer() {
     return this.CHART_CONTAINER;
   }
+  //#endregion
 
   //
-  @HostListener('resize', ['$event'])
+  //#region Chart ActionBar ...
-  onResize(event: any) {
+  //
+  private CHART_ACTIONBAR: XActionBarComponent = undefined;
+
+  @ViewChild('chartActionBar', { static: false })
+  set chartActionBar(v: XActionBarComponent) {
+    this.CHART_ACTIONBAR = v;
+  }
+
+  get chartActionBar() {
+    return this.CHART_ACTIONBAR;
+  }
+  //#endregion
+
+  //
+  //#region Chart Card ...
+  //
+  private CHART_CARD: XCardComponent = undefined;
+
+  @ViewChild('chartCard', { static: false })
+  set chartCard(v: XCardComponent) {
     //
-    if (isNullOrUndefined(this.chartInstance)) {
+    if (!isNullOrUndefined(v)) {
-      return;
+      this.registerCardActionProvider();
+    } else {
+      this.unregisterCardActionProvider();
     }
 
     //
-    // TODO: Complete this ...
+    this.CHART_CARD = v;
-    // this.chartInstance.updateOptions();
   }
 
+  get chartCard() {
+    return this.CHART_CARD;
+  }
+  //#endregion
+
+  //
+  private ORIGINAL_HEIGHT: string = undefined;
+
   //
   private CHART_OPTIONS: XChartOptions = null;
 
@@ -91,6 +124,7 @@ export class XChartComponent extends XChartContainerComponent {
 
   //
   private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
+  private CARD_ACTION_PROVIDER_SUBSCRIPTION: Subscription;
 
   //
   readonly IconNames = Object.assign({}, XIconNames);
@@ -340,6 +374,7 @@ export class XChartComponent extends XChartContainerComponent {
     //
     this.destroyComponent();
     this.unregisterActionProvider();
+    this.unregisterCardActionProvider();
   }
   //#endregion
 
@@ -663,52 +698,17 @@ export class XChartComponent extends XChartContainerComponent {
 
   async handleToggleFullscreen() {
     //
+    if (
+      isNullOrUndefined(this.chartInstance) ||
+      isNullOrUndefined(this.chartContainer) ||
+      isNullOrUndefined(this.chartContainer.nativeElement)
+    ) {
+      return;
+    }
+
+    //
+    // Handle Fullscreen Toggle using Card ...
     this.cardActionProvider.next({ action: XCardAction.ToggleFullScreen });
-
-    // if (
-    //   isNullOrUndefined(this.chartInstance) ||
-    //   isNullOrUndefined(this.chartContainer) ||
-    //   isNullOrUndefined(this.chartContainer.nativeElement)
-    // ) {
-    //   return;
-    // }
-
-    // //
-    // const chartWrapper = this.chartContainer.nativeElement;
-    // const doc = document as any;
-
-    // //
-    // // Check if the chart wrapper is currently in fullscreen mode
-    // const isFullscreen =
-    //   doc.fullscreenElement === chartWrapper ||
-    //   doc.msFullscreenElement === chartWrapper ||
-    //   doc.mozFullScreenElement === chartWrapper ||
-    //   doc.webkitFullscreenElement === chartWrapper;
-    // if (!isFullscreen) {
-    //   //
-    //   // Enter Fullscreen
-    //   if (chartWrapper.requestFullscreen) {
-    //     await chartWrapper.requestFullscreen();
-    //   } else if (chartWrapper.webkitRequestFullscreen) {
-    //     await chartWrapper.webkitRequestFullscreen();
-    //   } else if (chartWrapper.mozRequestFullScreen) {
-    //     await chartWrapper.mozRequestFullScreen();
-    //   } else if (chartWrapper.msRequestFullscreen) {
-    //     await chartWrapper.msRequestFullscreen();
-    //   }
-    // } else {
-    //   //
-    //   // Exit Fullscreen
-    //   if (doc.exitFullscreen) {
-    //     await doc.exitFullscreen();
-    //   } else if (doc.webkitExitFullscreen) {
-    //     await doc.webkitExitFullscreen();
-    //   } else if (doc.mozCancelFullScreen) {
-    //     await doc.mozCancelFullScreen();
-    //   } else if (doc.msExitFullscreen) {
-    //     await doc.msExitFullscreen();
-    //   }
-    // }
   }
   //#endregion
 
@@ -725,8 +725,14 @@ export class XChartComponent extends XChartContainerComponent {
     const type = await this.getValueAsync(this.type);
     const chartId = await this.getValueAsync(this.uuid);
     const series = await this.getValueAsync(this.series);
+
+    //
     const cOptions = await this.getValueAsync(this.options);
 
+    //
+    const colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> =
+      [getXColorValue(XColorWithBrightness.PrimaryShade)];
+
     //
     const title = await this.getResourceValueAsync(this.title);
     const titleAlignProp = await this.getValueAsync(this.titleAlign);
@@ -760,6 +766,9 @@ export class XChartComponent extends XChartContainerComponent {
     //
     const primaryColorValue = getXColorValue(XColorWithBrightness.Primary);
 
+    //
+    console.log('cOptions: ', cOptions);
+
     //
     // Normalize Directional Properties ....
     if (this.managerService.uiDirection == 'ltr') {
@@ -799,27 +808,27 @@ export class XChartComponent extends XChartContainerComponent {
     //
     this.CHART_OPTIONS = {
       ...cOptions,
-      series: series || cOptions.series,
+      series: series,
       title: {
-        ...cOptions.title,
+        ...cOptions?.title,
         text: title,
         align: titleAlign,
         style: {
-          ...cOptions.title?.style,
+          ...cOptions?.title?.style,
           color: titleColorValue,
         },
       },
       subtitle: {
-        ...cOptions.subtitle,
+        ...cOptions?.subtitle,
         text: subTitle,
         align: subTitleAlign,
         style: {
-          ...cOptions.subtitle?.style,
+          ...cOptions?.subtitle?.style,
           color: subTitleColorValue,
         },
       },
       chart: {
-        ...cOptions.chart,
+        ...cOptions?.chart,
         id: chartId,
         type: type as any,
         foreColor: foregroundColorValue,
@@ -829,7 +838,7 @@ export class XChartComponent extends XChartContainerComponent {
           autoSelected: 'pan',
         },
         events: {
-          ...cOptions.chart?.events,
+          ...cOptions?.chart?.events,
           //
           //#region Attach Events ...
           //
@@ -840,7 +849,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.animationEnd?.(chart, options);
+            cOptions?.chart?.events?.animationEnd?.(chart, options);
           },
 
           //
@@ -851,7 +860,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeMount?.(chart, options);
+            cOptions?.chart?.events?.beforeMount?.(chart, options);
           },
 
           //
@@ -862,7 +871,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mounted?.(chart, options);
+            cOptions?.chart?.events?.mounted?.(chart, options);
           },
 
           //
@@ -873,7 +882,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.updated?.(chart, options);
+            cOptions?.chart?.events?.updated?.(chart, options);
           },
 
           //
@@ -888,7 +897,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mouseMove?.(e, chart, options);
+            cOptions?.chart?.events?.mouseMove?.(e, chart, options);
           },
 
           //
@@ -903,7 +912,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.mouseLeave?.(e, chart, options);
           },
 
           //
@@ -918,7 +927,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.click?.(e, chart, options);
+            cOptions?.chart?.events?.click?.(e, chart, options);
           },
 
           //
@@ -933,7 +942,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.xAxisLabelClick?.(e, chart, options);
+            cOptions?.chart?.events?.xAxisLabelClick?.(e, chart, options);
           },
 
           //
@@ -951,7 +960,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.legendClick?.(chart, seriesIndex, options);
+            cOptions?.chart?.events?.legendClick?.(chart, seriesIndex, options);
           },
 
           //
@@ -966,7 +975,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.markerClick?.(e, chart, options);
+            cOptions?.chart?.events?.markerClick?.(e, chart, options);
           },
 
           //
@@ -983,7 +992,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.selection?.(chart, options);
+            cOptions?.chart?.events?.selection?.(chart, options);
           },
 
           //
@@ -998,7 +1007,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointSelection?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointSelection?.(e, chart, options);
           },
 
           //
@@ -1013,7 +1022,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointMouseEnter?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseEnter?.(e, chart, options);
           },
 
           //
@@ -1028,7 +1037,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointMouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseLeave?.(e, chart, options);
           },
 
           //
@@ -1042,7 +1051,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeZoom?.(chart, options);
           },
 
           //
@@ -1053,7 +1062,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeResetZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeResetZoom?.(chart, options);
           },
 
           //
@@ -1070,7 +1079,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.zoomed?.(chart, options);
+            cOptions?.chart?.events?.zoomed?.(chart, options);
           },
 
           //
@@ -1084,7 +1093,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.scrolled?.(chart, options);
+            cOptions?.chart?.events?.scrolled?.(chart, options);
           },
 
           //
@@ -1101,7 +1110,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.brushScrolled?.(chart, options);
+            cOptions?.chart?.events?.brushScrolled?.(chart, options);
           },
 
           //
@@ -1118,7 +1127,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.crossFilter?.(chart, options);
+            cOptions?.chart?.events?.crossFilter?.(chart, options);
           },
 
           //
@@ -1138,7 +1147,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.filterChange?.(chart, options);
+            cOptions?.chart?.events?.filterChange?.(chart, options);
           },
 
           //
@@ -1160,7 +1169,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationDragged?.(chart, options);
+            cOptions?.chart?.events?.annotationDragged?.(chart, options);
           },
 
           //
@@ -1179,7 +1188,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationEdited?.(chart, options);
+            cOptions?.chart?.events?.annotationEdited?.(chart, options);
           },
 
           //
@@ -1199,7 +1208,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationCreated?.(chart, options);
+            cOptions?.chart?.events?.annotationCreated?.(chart, options);
           },
 
           //
@@ -1219,7 +1228,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationStyled?.(chart, options);
+            cOptions?.chart?.events?.annotationStyled?.(chart, options);
           },
 
           //
@@ -1237,7 +1246,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationDeleted?.(chart, options);
+            cOptions?.chart?.events?.annotationDeleted?.(chart, options);
           },
 
           //
@@ -1258,7 +1267,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.measured?.(chart, options);
+            cOptions?.chart?.events?.measured?.(chart, options);
           },
 
           //
@@ -1272,7 +1281,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beatChange?.(chart, options);
+            cOptions?.chart?.events?.beatChange?.(chart, options);
           },
 
           //
@@ -1287,7 +1296,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.keyDown?.(e, chart, options);
+            cOptions?.chart?.events?.keyDown?.(e, chart, options);
           },
 
           //
@@ -1302,7 +1311,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.keyUp?.(e, chart, options);
+            cOptions?.chart?.events?.keyUp?.(e, chart, options);
           },
 
           //
@@ -1317,7 +1326,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownStart?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownStart?.(info, chart, options);
           },
 
           //
@@ -1332,7 +1341,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownEnd?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownEnd?.(info, chart, options);
           },
 
           //
@@ -1347,7 +1356,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillUp?.(info, chart, options);
+            cOptions?.chart?.events?.drillUp?.(info, chart, options);
           },
 
           //
@@ -1362,22 +1371,22 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownError?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownError?.(info, chart, options);
           },
           //#endregion
         },
       },
       theme: {
-        ...cOptions.theme,
+        ...cOptions?.theme,
-        palette: cOptions.theme?.palette || 'palette1',
+        palette: cOptions?.theme?.palette || 'palette1',
       },
-      colors: cOptions.colors || [primaryColorValue],
+      colors: colors,
       grid: {
-        ...cOptions.grid,
+        ...cOptions?.grid,
         borderColor: gridColorValue,
       },
       dataLabels: {
-        ...cOptions.dataLabels,
+        ...cOptions?.dataLabels,
       },
     };
 
@@ -1387,9 +1396,18 @@ export class XChartComponent extends XChartContainerComponent {
       this.CHART_OPTIONS,
     );
 
+    //
+    // Storing Original Height ...
+    if (isNullOrEmptyString(this.ORIGINAL_HEIGHT)) {
+      this.ORIGINAL_HEIGHT = this.CHART_OPTIONS.chart?.height?.toString();
+    }
+
     //
     await this.prepareActionBar();
 
+    //
+    console.log('CHART_OPTIONS: ', this.CHART_OPTIONS);
+
     //
     await this.chartInstance.render();
   }
@@ -2071,6 +2089,60 @@ export class XChartComponent extends XChartContainerComponent {
     this.chartInstance = null;
   }
 
+  private async handleFullscreenMode(isFullscreen: boolean) {
+    //
+    if (
+      isNullOrUndefined(this.chartCard) ||
+      isNullOrUndefined(this.chartInstance)
+    ) {
+      return;
+    }
+
+    //
+    let height = this.ORIGINAL_HEIGHT;
+    if (isFullscreen) {
+      //
+      const cardImageElement = document.querySelector('.x-card .x-image');
+      const cardHeaderElement = document.querySelector('.x-card .x-header');
+      const cardFooterElement = document.querySelector('.x-card .x-footer');
+      const cardContentElement = document.querySelector('.x-card .x-content');
+      const cardActionsElement = document.querySelector('.x-card .x-actions');
+      const actionBarHeight =
+        (this.chartActionBar?.element?.nativeElement as HTMLElement)
+          ?.offsetHeight || 0;
+
+      //
+      const offset = 24;
+      height = `${
+        window.innerHeight -
+        offset -
+        (actionBarHeight +
+          (cardImageElement?.clientHeight || 0) +
+          (cardHeaderElement?.clientHeight || 0) +
+          (cardActionsElement?.clientHeight || 0) +
+          (cardFooterElement?.clientHeight || 0))
+      }px`;
+    }
+
+    //
+    this.CHART_OPTIONS = {
+      ...this.CHART_OPTIONS,
+      chart: {
+        height: height,
+      },
+    };
+
+    //
+    this.chartInstance.updateOptions(
+      this.CHART_OPTIONS,
+      false,
+      true,
+      false,
+      false,
+    );
+    this.managerService.dispatchResizeEvent();
+  }
+
   private registerActionProvider() {
     //
     this.unregisterActionProvider();
@@ -2141,5 +2213,43 @@ export class XChartComponent extends XChartContainerComponent {
     this.ACTION_PROVIDER_SUBSCRIPTION.unsubscribe();
     this.ACTION_PROVIDER_SUBSCRIPTION = null;
   }
+
+  private registerCardActionProvider() {
+    //
+    if (!isNullOrUndefined(this.CARD_ACTION_PROVIDER_SUBSCRIPTION)) {
+      this.unregisterCardActionProvider();
+    }
+
+    //
+    this.CARD_ACTION_PROVIDER_SUBSCRIPTION = this.cardActionProvider
+      .asObservable()
+      .subscribe(async (model) => {
+        //
+        if (isNullOrUndefined(model) || isNullOrEmptyString(model.action)) {
+          return;
+        }
+
+        //
+        // Handle Full Screen Toggled ...
+        if (model.action == XCardAction.FullScreenToggled) {
+          //
+          const isFullscreen = isNullOrUndefined(model.payload)
+            ? false
+            : (model.payload as boolean) || false;
+          await this.handleFullscreenMode(isFullscreen);
+        }
+      });
+  }
+
+  private unregisterCardActionProvider() {
+    //
+    if (isNullOrUndefined(this.CARD_ACTION_PROVIDER_SUBSCRIPTION)) {
+      return;
+    }
+
+    //
+    this.CARD_ACTION_PROVIDER_SUBSCRIPTION.unsubscribe();
+    this.CARD_ACTION_PROVIDER_SUBSCRIPTION = null;
+  }
   //#endregion
 }

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

@@ -17,6 +17,7 @@ import {
   XColorIdentifier,
   XResourceIdentifier,
   XColorWithBrightness,
+  getXColorValue,
 } from 'x-framework-core';
 import {
   XCardActionModel,
@@ -42,7 +43,6 @@ import { XBaseActionModel } from '../classes/x-base-action.model';
 import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
 import { XPopoverPresentOptions } from '../dialogs/x-popover/x-popover.typings';
 import { XFrameworkComponentsConfig } from '../config/x-framework-components.config';
-import { XIconIdentifier } from '../x-icon/x-icon.typings';
 
 //
 //#region Chart ...
@@ -2694,19 +2694,19 @@ export type XChart = {
     ): void;
     /** Fired before a drill-down transition begins. Requires the Drilldown feature. */
     drillDownStart?(
-      info: XChartDrilldownEvent,
+      info: ApexCharts.ApexDrilldownEvent,
       chart?: ApexCharts,
       options?: XChartEventOpts,
     ): void;
     /** Fired after a drill-down transition completes. Requires the Drilldown feature. */
     drillDownEnd?(
-      info: XChartDrilldownEvent,
+      info: ApexCharts.ApexDrilldownEvent,
       chart?: ApexCharts,
       options?: XChartEventOpts,
     ): void;
     /** Fired after navigating back up a drilldown level. Requires the Drilldown feature. */
     drillUp?(
-      info: XChartDrilldownEvent,
+      info: ApexCharts.ApexDrilldownEvent,
       chart?: ApexCharts,
       options?: XChartEventOpts,
     ): void;
@@ -3263,7 +3263,7 @@ export enum XChartActionBarItem {
 
 export type XChartActionBarItemIdentifier = XChartActionBarItem | string;
 
-export function isChartActionBar(value: XChartActionBarItemIdentifier) {
+export function isChartActionBar(value: string) {
   return isValueInEnum(value, Object.assign({}, XChartActionBarItem));
 }
 
@@ -3324,6 +3324,9 @@ export interface IXChartContainer extends TXChartContainer {
   series: XStandardType<XChartSeriesType>;
   type: XStandardType<XChartTypeIdentifier>;
 
+  //
+  colors: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+
   //
   title: XStandardType<XResourceIdentifier>;
   titleAlign: XStandardType<XChartTextAlignIdentifier>;
@@ -3464,8 +3467,8 @@ export class XChartContainer
   implements Readonly<IXChartContainer>
 {
   //
-  readonly cssClass: XStandardType<XOneOrManyType<string>>;
   readonly actionProvider = new Subject<XChartActionModel>();
+  readonly cssClass: XStandardType<XOneOrManyType<string>>;
 
   //
   // Chart Props ...
@@ -3474,11 +3477,17 @@ export class XChartContainer
   readonly series: XStandardType<XChartSeriesType>;
   readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
 
+  //
+  readonly colors: Array<
+    string | ((opts: XChartColorFormatterOpts) => string)
+  > = [getXColorValue(XColorWithBrightness.PrimaryShade)];
+
   //
   readonly title: XStandardType<XResourceIdentifier>;
   readonly titleAlign: XStandardType<XChartTextAlignIdentifier> =
     XChartTextAlign.Center;
 
+  //
   readonly subTitle: XStandardType<XResourceIdentifier>;
   readonly subTitleAlign: XStandardType<XChartTextAlignIdentifier> =
     XChartTextAlign.Center;
@@ -3654,16 +3663,6 @@ export class XChartContainer
     this.cardPropertyProvider.cardShowFooter;
   readonly cardShowActions: XStandardType<boolean> =
     this.cardPropertyProvider.cardShowActions;
-  readonly cardShowFullScreenButton: XStandardType<boolean> =
-    this.cardPropertyProvider.cardShowFullScreenButton;
-  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
-  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
-  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardExitFullScreenButtonColor;
-  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
   //#endregion
 
   //
@@ -3708,6 +3707,9 @@ export abstract class XChartContainerComponent
   @Input()
   zoomStep: XStandardType<number> = this.propertyProvider.zoomStep;
 
+  @Input()
+  colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> = this.propertyProvider.colors;
+
   @Input()
   defaultActionBarItemColor: XStandardType<XColorIdentifier> =
     this.propertyProvider.defaultActionBarItemColor;
@@ -3969,26 +3971,6 @@ export abstract class XChartContainerComponent
   @Input()
   cardActionProvider: Subject<XCardActionModel> =
     this.propertyProvider.cardActionProvider;
-
-  @Input()
-  cardShowFullScreenButton: XStandardType<boolean> =
-    this.propertyProvider.cardShowFullScreenButton;
-
-  @Input()
-  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonIcon;
-
-  @Input()
-  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonIcon;
-
-  @Input()
-  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardExitFullScreenButtonColor;
-
-  @Input()
-  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
-    this.propertyProvider.cardEnterFullScreenButtonColor;
   //#endregion
 
   //
@@ -4044,7 +4026,7 @@ export abstract class XChartContainerComponent
       changeDetector,
     );
   }
-  //#endregion
+  //#endregionّ
 
   //
   //#region Abstract ...
@@ -4060,10 +4042,13 @@ export abstract class XChartContainerComponent
 
       //
       type: this.getValue(container ? container.type : this.type),
-      options: this.getValue(container ? container.options : this.options),
       series: this.getValue(container ? container.series : this.series),
+      options: this.getValue(container ? container.options : this.options),
       zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep),
 
+      //
+      colors: this.getValue(container ? container.colors : this.colors),
+
       //
       title: this.getValue(container ? container.title : this.title),
       titleAlign: this.getValue(
@@ -4133,31 +4118,6 @@ export abstract class XChartContainerComponent
       cardSubTitle: this.getValue(
         container ? container.cardSubTitle : this.cardSubTitle,
       ),
-      cardShowFullScreenButton: this.getValue(
-        container
-          ? container.cardShowFullScreenButton
-          : this.cardShowFullScreenButton,
-      ),
-      cardExitFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonIcon
-          : this.cardExitFullScreenButtonIcon,
-      ),
-      cardEnterFullScreenButtonIcon: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonIcon
-          : this.cardEnterFullScreenButtonIcon,
-      ),
-      cardExitFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardExitFullScreenButtonColor
-          : this.cardExitFullScreenButtonColor,
-      ),
-      cardEnterFullScreenButtonColor: this.getValue(
-        container
-          ? container.cardEnterFullScreenButtonColor
-          : this.cardEnterFullScreenButtonColor,
-      ),
       //#endregion
 
       //

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

@@ -45,7 +45,8 @@ export enum XFileDropAreaAction {
 
 export type XFileDropAreaActionIdentifier = XFileDropAreaAction | string;
 
-export interface XFileDropAreaActionModel extends XBaseActionModel<XFileDropAreaActionIdentifier> {}
+export interface XFileDropAreaActionModel
+  extends XBaseActionModel<XFileDropAreaActionIdentifier> {}
 
 export enum XFileDropAreaCssVars {
   LabelColor = 'label-color',
@@ -210,7 +211,7 @@ export abstract class XFileDropAreaContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XFileDropAreaContainer,
+    protected propertyProvider: XFileDropAreaContainer
   ) {
     super(
       config,
@@ -220,7 +221,7 @@ export abstract class XFileDropAreaContainerComponent
       ruler,
       zone,
       changeDetector,
-      propertyProvider,
+      propertyProvider
     );
   }
   //#endregion
@@ -228,7 +229,7 @@ export abstract class XFileDropAreaContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXFileDropAreaContainer,
+    container?: IXFileDropAreaContainer
   ): Observable<IXFileDropAreaContainer> {
     return super
       .extractProps(container ? container : this)
@@ -237,40 +238,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) => {
@@ -278,9 +279,9 @@ export abstract class XFileDropAreaContainerComponent
                 superData,
                 data,
               };
-            }),
+            })
           );
-        }),
+        })
       )
       .pipe(
         map((info) => {
@@ -304,7 +305,7 @@ export abstract class XFileDropAreaContainerComponent
             //
             filesChangeEmiter: this.filesChangeEmiter,
           };
-        }),
+        })
       );
   }
   //#endregion
@@ -320,7 +321,8 @@ type TXComponentFileDropAreaContainer = {
 };
 
 export interface IXComponentFileDropAreaContainer
-  extends TXComponentFileDropAreaContainer, IXBaseComponentContainer {
+  extends TXComponentFileDropAreaContainer,
+    IXBaseComponentContainer {
   showFileDropArea: XStandardType<boolean>;
 }
 
@@ -403,16 +405,6 @@ 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
 
@@ -583,26 +575,6 @@ 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
 
@@ -617,7 +589,7 @@ export abstract class XComponentFileDropAreaContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentFileDropAreaContainer,
+    protected propertyProvider: XComponentFileDropAreaContainer
   ) {
     super(
       config,
@@ -626,7 +598,7 @@ export abstract class XComponentFileDropAreaContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -634,137 +606,108 @@ 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 ? container.fileDropAreaCardColor : this.fileDropAreaCardColor
-          ? container.fileDropAreaCardColor
-          : this.fileDropAreaCardColor,
       ),
       fileDropAreaCardForegroundColor: this.getValue(
         container
           ? container.fileDropAreaCardForegroundColor
-          : this.fileDropAreaCardForegroundColor,
+          : this.fileDropAreaCardForegroundColor
       ),
       fileDropAreaCardTitle: this.getValue(
-        container
+        container ? container.fileDropAreaCardTitle : this.fileDropAreaCardTitle
-          ? 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) => {
@@ -785,7 +728,7 @@ export abstract class XComponentFileDropAreaContainerComponent
           //
           fileDropAreaFilesChangeEmiter: this.fileDropAreaFilesChangeEmiter,
         };
-      }),
+      })
     );
   }
   //#endregion

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

@@ -96,11 +96,12 @@ export enum XFileUploadAction {
 
 export type XFileUploadActionIdentifier = XFileUploadAction | string;
 
-export interface XFileUploadActionModel extends XBaseActionModel<XFileUploadActionIdentifier> {}
+export interface XFileUploadActionModel
+  extends XBaseActionModel<XFileUploadActionIdentifier> {}
 
 export const defaultFileUploadListFilteringHandler: XListFilteringHandler = (
   query: string,
-  items: XListItem<File>[],
+  items: XListItem<File>[]
 ) => {
   //
   if (!query || !hasChild(items)) {
@@ -109,7 +110,7 @@ export const defaultFileUploadListFilteringHandler: XListFilteringHandler = (
 
   //
   return items.filter((i) =>
-    toNormalString(fileToJsonString(i.data)).includes(toNormalString(query)),
+    toNormalString(fileToJsonString(i.data)).includes(toNormalString(query))
   );
 };
 
@@ -129,7 +130,8 @@ type TXFileUploadContainer = IXComponentCardContainer &
   IXFileContainer;
 
 export interface IXFileUploadContainer
-  extends IXBaseContainer, TXFileUploadContainer {
+  extends IXBaseContainer,
+    TXFileUploadContainer {
   //
   actionProvider: Subject<XFileUploadActionModel>;
   cssClass: XStandardType<XOneOrManyType<string>>;
@@ -168,8 +170,9 @@ export class XFileUploadContainer
   readonly foregroundColor: XStandardType<boolean> = false;
 
   //
-  readonly fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> =
+  readonly fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> = new EventEmitter<
-    new EventEmitter<XOneOrManyType<File | XFileBlob>>();
+    XOneOrManyType<File | XFileBlob>
+  >();
 
   readonly actionBarHideActions: XStandardType<
     XOneOrManyType<XActionBarActionIdentifier>
@@ -250,16 +253,6 @@ 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
 
   //
@@ -445,7 +438,7 @@ export class XFileUploadContainer
     protected emptyPropertyProvider: XComponentEmptyContainer,
     protected actionBarPropertyProvider: XComponentActionBarContainer,
     protected searchBarPropertyProvider: XComponentSearchBarContainer,
-    protected fileDropAreaPropertyProvider: XComponentFileDropAreaContainer,
+    protected fileDropAreaPropertyProvider: XComponentFileDropAreaContainer
   ) {
     super();
   }
@@ -483,8 +476,7 @@ export abstract class XFileUploadContainerComponent
 
   //
   @Output()
-  fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> =
+  fileChange: EventEmitter<XOneOrManyType<File | XFileBlob | any>> = new EventEmitter();
-    new EventEmitter();
 
   @Input()
   actionBarHideActions: XStandardType<
@@ -604,26 +596,6 @@ 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
 
   //
@@ -694,8 +666,7 @@ export abstract class XFileUploadContainerComponent
 
   //
   @Output()
-  actionBarActionFired: EventEmitter<XActionBarActionFiredModel> =
+  actionBarActionFired: EventEmitter<XActionBarActionFiredModel> = new EventEmitter<XActionBarActionFiredModel>();
-    new EventEmitter<XActionBarActionFiredModel>();
   //#endregion
 
   //
@@ -917,7 +888,7 @@ export abstract class XFileUploadContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XFileUploadContainer,
+    protected propertyProvider: XFileUploadContainer
   ) {
     super(
       config,
@@ -926,7 +897,7 @@ export abstract class XFileUploadContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -934,342 +905,313 @@ 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 ? container.searchBarEnterKeyHint : this.searchBarEnterKeyHint
-          ? container.searchBarEnterKeyHint
-          : this.searchBarEnterKeyHint,
       ),
       searchBarKeyboardType: this.getValue(
-        container
+        container ? container.searchBarKeyboardType : this.searchBarKeyboardType
-          ? 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) => {
@@ -1328,7 +1270,7 @@ export abstract class XFileUploadContainerComponent
           //
           emptyRefresh: this.emptyRefresh,
         };
-      }),
+      })
     );
   }
   //#endregion

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

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

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

@@ -38,7 +38,6 @@ 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';
@@ -84,7 +83,8 @@ export enum XIDEAction {
 
 export type XIDEActionIdentifier = XIDEAction | string;
 
-export interface XIDEActionModel extends XBaseActionModel<XIDEActionIdentifier> {}
+export interface XIDEActionModel
+  extends XBaseActionModel<XIDEActionIdentifier> {}
 //#endregion
 
 //
@@ -520,16 +520,6 @@ 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
 
   //
@@ -555,7 +545,7 @@ export class XIDEContainer extends XBaseContainer implements IXIDEContainer {
   //#region Constructor ...
   constructor(
     protected cardPropertyProvider: XComponentCardContainer,
-    protected actionBarPropertyProvider: XComponentActionBarContainer,
+    protected actionBarPropertyProvider: XComponentActionBarContainer
   ) {
     super();
   }
@@ -582,8 +572,7 @@ export class XIDEContainerComponent
   defaultTabName: XStandardType<string> = this.propertyProvider.defaultTabName;
 
   @Input()
-  hasCloseOnDefaultTab: XStandardType<boolean> =
+  hasCloseOnDefaultTab: XStandardType<boolean> = this.propertyProvider.hasCloseOnDefaultTab;
-    this.propertyProvider.hasCloseOnDefaultTab;
 
   @Input()
   theme: XStandardType<XIDEThemeIdentifier> = this.propertyProvider.theme;
@@ -702,27 +691,6 @@ 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
 
   //
@@ -767,7 +735,7 @@ export class XIDEContainerComponent
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
     protected propertyProvider: XIDEContainer,
-    protected popoverService: XPopoverService,
+    protected popoverService: XPopoverService
   ) {
     super(
       config,
@@ -776,7 +744,7 @@ export class XIDEContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -795,43 +763,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
 
@@ -840,87 +808,62 @@ 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(
@@ -948,7 +891,7 @@ export class XIDEContainerComponent
           contentChange: this.contentChange,
           actionBarActionFired: this.actionBarActionFired,
         };
-      }),
+      })
     );
   }
   //#endregion

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

@@ -103,11 +103,12 @@ export enum XListAction {
 
 export type XListActionIdentifier = XListAction | string;
 
-export interface XListActionModel extends XBaseActionModel<XListActionIdentifier> {}
+export interface XListActionModel
+  extends XBaseActionModel<XListActionIdentifier> {}
 
 export type XListFilteringHandler = (
   query: string,
-  source: XListItem<any>[],
+  source: XListItem<any>[]
 ) => XStandardType<XListItem<any>[]>;
 
 export function itemToJson(item: any) {
@@ -116,7 +117,7 @@ export function itemToJson(item: any) {
 
 export const defaultListFilteringHandler: XListFilteringHandler = (
   query: string,
-  items: XListItem<any>[],
+  items: XListItem<any>[]
 ) => {
   //
   if (!query || !hasChild(items)) {
@@ -125,7 +126,7 @@ export const defaultListFilteringHandler: XListFilteringHandler = (
 
   //
   const result = items.filter((i) =>
-    toNormalString(itemToJson(i.data)).includes(toNormalString(query)),
+    toNormalString(itemToJson(i.data)).includes(toNormalString(query))
   );
 
   //
@@ -335,8 +336,7 @@ export abstract class XListContainerComponent
   itemSelected: EventEmitter<XListItem<any>> = new EventEmitter();
 
   @Output()
-  optionSelected: EventEmitter<XListItemOptionSelectedEvent> =
+  optionSelected: EventEmitter<XListItemOptionSelectedEvent> = new EventEmitter();
-    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,73 +405,71 @@ 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 ? container.showOptionsAsSlide : this.showOptionsAsSlide
-                ? 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) => {
@@ -479,9 +477,9 @@ export abstract class XListContainerComponent
                 superData,
                 data,
               };
-            }),
+            })
           );
-        }),
+        })
       )
       .pipe(
         map((info) => {
@@ -505,7 +503,7 @@ export abstract class XListContainerComponent
             selectionChanged: this.selectionChanged,
             orderChanged: this.orderChanged,
           };
-        }),
+        })
       );
   }
   //#endregion
@@ -521,7 +519,8 @@ type TXComponentListContainer = {
 };
 
 export interface IXComponentListContainer
-  extends TXComponentListContainer, IXBaseComponentContainer {
+  extends TXComponentListContainer,
+    IXBaseComponentContainer {
   showList: XStandardType<boolean>;
 }
 
@@ -633,16 +632,6 @@ 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
 
   //
@@ -880,8 +869,7 @@ export abstract class XComponentListContainerComponent
   listItemSelected: EventEmitter<XListItem<any>> = new EventEmitter();
 
   @Output()
-  listOptionSelected: EventEmitter<XListItemOptionSelectedEvent> =
+  listOptionSelected: EventEmitter<XListItemOptionSelectedEvent> = new EventEmitter();
-    new EventEmitter();
 
   @Input()
   listConfirmRemove: XStandardType<boolean> =
@@ -952,26 +940,6 @@ 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
 
   //
@@ -1060,8 +1028,7 @@ export abstract class XComponentListContainerComponent
 
   //
   @Output()
-  listActionBarActionFired: EventEmitter<XActionBarActionFiredModel> =
+  listActionBarActionFired: EventEmitter<XActionBarActionFiredModel> = new EventEmitter<XActionBarActionFiredModel>();
-    new EventEmitter<XActionBarActionFiredModel>();
   //#endregion
 
   //
@@ -1186,7 +1153,7 @@ export abstract class XComponentListContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentListContainer,
+    protected propertyProvider: XComponentListContainer
   ) {
     super(
       config,
@@ -1195,7 +1162,7 @@ export abstract class XComponentListContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector,
+      changeDetector
     );
   }
   //#endregion
@@ -1203,303 +1170,266 @@ 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 ? container.listUseDefaultActions : this.listUseDefaultActions
-          ? 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 ? container.listShowOptionsAsMenu : this.listShowOptionsAsMenu
-          ? 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 ? container.listEmptyMessageColor : this.listEmptyMessageColor
-          ? 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 ? container.listActionBarCssClass : this.listActionBarCssClass
-          ? 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 ? container.listSearchBarCssClass : this.listSearchBarCssClass
-          ? 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 ? container.listSearchBarDebounce : this.listSearchBarDebounce
-          ? 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) => {
@@ -1548,7 +1478,7 @@ export abstract class XComponentListContainerComponent
           listSearchBarQueryChange: this.listSearchBarQueryChange,
           listSearchBarOnEvent: this.listSearchBarOnEvent,
         };
-      }),
+      })
     );
   }
   //#endregion