last ...

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
 }
@@ -259,9 +267,9 @@ export class XFileContainer implements Readonly<IXFileContainer> {
 })
 @Component({
   template: `
-    <!--
+    <!-- 
         <ng-container *ngIf="extractProps() | async as props">
-        </ng-container>
+        </ng-container> 
     -->
   `,
 })
@@ -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.typings.ts

@@ -13,6 +13,7 @@ import {
 import {
   XStandardType,
   isValueInEnum,
+  getXColorValue,
   XOneOrManyType,
   XColorIdentifier,
   XResourceIdentifier,
@@ -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 ...
@@ -102,6 +102,41 @@ export type XChartXAxisAnnotations = XCahrtAxisBaseAnnotations & {
   x2?: null | number | string;
 };
 
+export type XChartMarkerAnnotations = {
+  size?: number;
+  fillColor?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  shape?: string;
+  offsetX?: number;
+  offsetY?: number;
+  cssClass?: string;
+};
+
+export type XChartTooltipAnnotations = {
+  enabled?: boolean;
+  /**
+   * Static tooltip content (HTML allowed; an array is joined with line
+   * breaks). Falls back to `label.text` when omitted.
+   */
+  text?: string | string[];
+  /**
+   * Returns the tooltip markup (HTML). Takes precedence over `text`.
+   */
+  formatter?: (opts: {
+    annotation: XChartPointAnnotations;
+    seriesIndex?: number;
+    id?: number | string;
+    w: any;
+  }) => string;
+  /**
+   * Tooltip theme. Falls back to the global `tooltip.theme`.
+   */
+  theme?: 'light' | 'dark';
+  offsetX?: number;
+  offsetY?: number;
+};
+
 export type XChartPointAnnotations = {
   id?: number | string;
   x?: number | string;
@@ -116,16 +151,7 @@ export type XChartPointAnnotations = {
   mouseEnter?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
   mouseLeave?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
   click?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
-  marker?: {
+  marker?: XChartMarkerAnnotations;
-    size?: number;
-    fillColor?: string;
-    strokeColor?: string;
-    strokeWidth?: number;
-    shape?: string;
-    offsetX?: number;
-    offsetY?: number;
-    cssClass?: string;
-  };
   label?: XChartAnnotationLabel;
   image?: {
     path?: string;
@@ -138,29 +164,7 @@ export type XChartPointAnnotations = {
    * Show a hover tooltip over the annotation marker, like a regular data
    * point. Useful for surfacing more detail than fits in the label.
    */
-  tooltip?: {
+  tooltip?: XChartTooltipAnnotations;
-    enabled?: boolean;
-    /**
-     * Static tooltip content (HTML allowed; an array is joined with line
-     * breaks). Falls back to `label.text` when omitted.
-     */
-    text?: string | string[];
-    /**
-     * Returns the tooltip markup (HTML). Takes precedence over `text`.
-     */
-    formatter?: (opts: {
-      annotation: XChartPointAnnotations;
-      seriesIndex?: number;
-      id?: number | string;
-      w: any;
-    }) => string;
-    /**
-     * Tooltip theme. Falls back to the global `tooltip.theme`.
-     */
-    theme?: 'light' | 'dark';
-    offsetX?: number;
-    offsetY?: number;
-  };
   /**
    * Render arbitrary SVG markup at the annotation's position. Deprecated in
    * favor of `image`/`marker`, but still supported.
@@ -371,71 +375,71 @@ export type XChartAxisChartSeries = {
   zIndex?: number;
   parsing?: XChartParsing;
   data:
-    | (number | null)[]
+  | (number | null)[]
-    | {
+  | {
-        /**
+    /**
-         * A category label, a timestamp, or a `Date`. On a `datetime` axis all
+     * A category label, a timestamp, or a `Date`. On a `datetime` axis all
-         * three keep millisecond resolution.
+     * three keep millisecond resolution.
-         */
+     */
-        x: string | number | Date;
+    x: string | number | Date;
-        /**
+    /**
-         * A plain value for most charts. For `candlestick`/`boxPlot`, the
+     * A plain value for most charts. For `candlestick`/`boxPlot`, the
-         * summary array (`[O,H,L,C]` / `[min,Q1,median,Q3,max]`). For `violin`, an
+     * summary array (`[O,H,L,C]` / `[min,Q1,median,Q3,max]`). For `violin`, an
-         * object carrying the precomputed density profile (`[value, weight]` pairs)
+     * object carrying the precomputed density profile (`[value, weight]` pairs)
-         * plus the raw observations rendered as jitter. For a `scatter` strip plot
+     * plus the raw observations rendered as jitter. For a `scatter` strip plot
-         * (`plotOptions.scatter.jitter`), the array of observations in this category.
+     * (`plotOptions.scatter.jitter`), the array of observations in this category.
-         */
+     */
-        y:
+    y:
-          | number
+    | number
-          | null
+    | null
-          | number[]
+    | number[]
-          | { density: [number, number][]; points?: number[] };
+    | { density: [number, number][]; points?: number[] };
-        /**
+    /**
-         * Optional raw observations for a `boxPlot` data point, rendered as jitter
+     * Optional raw observations for a `boxPlot` data point, rendered as jitter
-         * dots when `plotOptions.boxPlot.points.show` is enabled.
+     * dots when `plotOptions.boxPlot.points.show` is enabled.
-         */
+     */
-        points?: number[];
+    points?: number[];
-        fill?: XChartFill;
+    fill?: XChartFill;
-        fillColor?: string;
+    fillColor?: string;
-        strokeColor?: string;
+    strokeColor?: string;
-        meta?: unknown;
+    meta?: unknown;
-        /**
+    /**
-         * A second metric that drives this point's COLOUR, independent of `y`
+     * A second metric that drives this point's COLOUR, independent of `y`
-         * which drives its size (`treemap`). See
+     * which drives its size (`treemap`). See
-         * `plotOptions.treemap.colorScale.colorValue` to read a different key.
+     * `plotOptions.treemap.colorScale.colorValue` to read a different key.
-         */
+     */
-        colorValue?: number;
+    colorValue?: number;
-        /**
+    /**
-         * Nested hierarchy: this point is a branch containing these children,
+     * Nested hierarchy: this point is a branch containing these children,
-         * to any depth (`treemap`, `sunburst`). A branch normally omits `y` and
+     * to any depth (`treemap`, `sunburst`). A branch normally omits `y` and
-         * takes the sum of its children instead.
+     * takes the sum of its children instead.
-         */
+     */
-        children?: XChartHierarchyNode[];
+    children?: XChartHierarchyNode[];
-        /**
+    /**
-         * Drilldown target: the `id` of a `drilldown.series` entry. Clicking this
+     * Drilldown target: the `id` of a `drilldown.series` entry. Clicking this
-         * point drills into that level. Requires the Drilldown feature.
+     * point drills into that level. Requires the Drilldown feature.
-         */
+     */
-        drilldown?: string | number;
+    drilldown?: string | number;
-        goals?: {
+    goals?: {
-          name?: string;
+      name?: string;
-          value: number;
+      value: number;
-          strokeHeight?: number;
+      strokeHeight?: number;
-          strokeWidth?: number;
+      strokeWidth?: number;
-          strokeColor?: string;
+      strokeColor?: string;
-          strokeDashArray?: number;
+      strokeDashArray?: number;
-          strokeLineCap?: 'butt' | 'square' | 'round';
+      strokeLineCap?: 'butt' | 'square' | 'round';
-        }[];
+    }[];
-        barHeightOffset?: number;
+    barHeightOffset?: number;
-        columnWidthOffset?: number;
+    columnWidthOffset?: number;
-      }[]
+  }[]
-    | [number, number | null][]
+  | [number, number | null][]
-    | [number, (number | null)[]][]
+  | [number, (number | null)[]][]
-    | number[][]
+  | number[][]
-    // A `children` hierarchy for the partition charts, where a branch carries no
+  // A `children` hierarchy for the partition charts, where a branch carries no
-    // value of its own. Listed before the catch-all so authors get completion on
+  // value of its own. Listed before the catch-all so authors get completion on
-    // the node shape instead of falling through to `Record<string, any>`.
+  // the node shape instead of falling through to `Record<string, any>`.
-    | XChartHierarchyNode[]
+  | XChartHierarchyNode[]
-    | Record<string, any>[];
+  | Record<string, any>[];
 }[];
 
 export type XChartNonAxisChartSeries = number[] | XChartAxisChartSeries;
@@ -932,11 +936,11 @@ export type XChartPlotOptions = {
        * property, or an accessor to compute one.
        */
       colorValue?:
-        | string
+      | string
-        | ((
+      | ((
-            datum: any,
+        datum: any,
-            opts: { seriesIndex: number; dataPointIndex: number; w: any },
+        opts: { seriesIndex: number; dataPointIndex: number; w: any },
-          ) => number);
+      ) => number);
       /**
        * Continuous interpolation between colour stops, for the metric above.
        * Active as soon as any datum carries a colour metric; `enabled: false`
@@ -1069,13 +1073,13 @@ export type XChartPlotOptions = {
      * 'custom': positions come from `positions`.
      */
     layout?:
-      | 'grouped'
+    | 'grouped'
-      | 'packed'
+    | 'packed'
-      | 'columns'
+    | 'columns'
-      | 'grid'
+    | 'grid'
-      | 'scatter'
+    | 'scatter'
-      | 'arc'
+    | 'arc'
-      | 'custom';
+    | 'custom';
     /**
      * `layout: 'custom'` only. The layout provider: either a function returning
      * plot-pixel positions, or the name of one registered with
@@ -2103,19 +2107,19 @@ export interface XChartDrilldown {
   /** Inline child levels referenced by data-point `drilldown` ids. */
   series?: XChartDrilldownSeries[];
   breadcrumb?:
-    | false
+  | false
-    | {
+  | {
-        show?: boolean;
+    show?: boolean;
-        position?: 'top-left' | 'top-right';
+    position?: 'top-left' | 'top-right';
-        separator?: string;
+    separator?: string;
-        rootLabel?: string;
+    rootLabel?: string;
-        offsetX?: number;
+    offsetX?: number;
-        offsetY?: number;
+    offsetY?: number;
-        formatter?(
+    formatter?(
-          label: string,
+      label: string,
-          opts: { index: number; depth: number },
+      opts: { index: number; depth: number },
-        ): string;
+    ): string;
-      };
+  };
   animation?: {
     enabled?: boolean;
     /**
@@ -2164,11 +2168,11 @@ export interface XChartDrilldown {
    * name, so the default ships no user-visible English.
    */
   loading?:
-    | false
+  | false
-    | {
+  | {
-        show?: boolean;
+    show?: boolean;
-        text?: string;
+    text?: string;
-      };
+  };
   /**
    * Cache levels resolved by `onDrillDown`, keyed by id, so drilling back down
    * a branch does not re-fetch. Default true. Clear it with the drilldown
@@ -2274,12 +2278,12 @@ export type XChartStates = {
 export type XChartStroke = {
   show?: boolean;
   curve?:
-    | 'smooth'
+  | 'smooth'
-    | 'straight'
+  | 'straight'
-    | 'stepline'
+  | 'stepline'
-    | 'linestep'
+  | 'linestep'
-    | 'monotoneCubic'
+  | 'monotoneCubic'
-    | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[];
+  | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[];
   lineCap?: 'butt' | 'square' | 'round';
   colors?: string[];
   width?: number | number[];
@@ -2330,11 +2334,11 @@ export type XChartTheme = {
   };
   accessibility?: {
     colorBlindMode?:
-      | 'deuteranopia'
+    | 'deuteranopia'
-      | 'protanopia'
+    | 'protanopia'
-      | 'tritanopia'
+    | 'tritanopia'
-      | 'highContrast'
+    | 'highContrast'
-      | '';
+    | '';
   };
 };
 
@@ -2363,14 +2367,14 @@ export type XChartTooltip = {
   inverseOrder?: boolean;
   arrow?: boolean;
   custom?:
-    | ((
+  | ((
-        opts: XChartTooltipCustomOpts,
+    opts: XChartTooltipCustomOpts,
-      ) => string | number | Element | { nodeName: string })
+  ) => string | number | Element | { nodeName: string })
-    | Array<
+  | Array<
-        (
+    (
-          opts: XChartTooltipCustomOpts,
+      opts: XChartTooltipCustomOpts,
-        ) => string | number | Element | { nodeName: string }
+    ) => string | number | Element | { nodeName: string }
-      >;
+  >;
   fillSeriesColor?: boolean;
   theme?: 'light' | 'dark';
   cssClass?: string;
@@ -2408,6 +2412,8 @@ export type XChartTooltip = {
   };
 };
 
+export type XChartColorType = Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+
 export interface XChartOptions {
   annotations?: XChartAnnotations;
   chart?: XChart;
@@ -2416,7 +2422,7 @@ export interface XChartOptions {
    * named) or a function returning one per-datapoint. The list cycles when
    * there are more series than colors.
    */
-  colors?: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+  colors?: XChartColorType;
   dataLabels?: XChartDataLabels;
   /** Opt-in drilldown navigation. Requires `import 'apexcharts/features/drilldown'`. */
   drilldown?: XChartDrilldown;
@@ -2447,30 +2453,30 @@ export type XChart = {
   width?: string | number;
   height?: string | number;
   type?:
-    | 'line'
+  | 'line'
-    | 'area'
+  | 'area'
-    | 'bar'
+  | 'bar'
-    | 'pie'
+  | 'pie'
-    | 'donut'
+  | 'donut'
-    | 'radialBar'
+  | 'radialBar'
-    | 'scatter'
+  | 'scatter'
-    | 'bubble'
+  | 'bubble'
-    | 'heatmap'
+  | 'heatmap'
-    | 'candlestick'
+  | 'candlestick'
-    | 'boxPlot'
+  | 'boxPlot'
-    | 'violin'
+  | 'violin'
-    | 'histogram'
+  | 'histogram'
-    | 'radar'
+  | 'radar'
-    | 'polarArea'
+  | 'polarArea'
-    | 'rangeBar'
+  | 'rangeBar'
-    | 'rangeArea'
+  | 'rangeArea'
-    | 'treemap'
+  | 'treemap'
-    | 'unit'
+  | 'unit'
-    | 'waffle'
+  | 'waffle'
-    | 'sunburst'
+  | 'sunburst'
-    | 'funnel'
+  | 'funnel'
-    | 'pyramid'
+  | 'pyramid'
-    | 'gauge';
+  | 'gauge';
   /**
    * Internal — populated when `type` is a first-class alias (`'funnel'`,
    * `'pyramid'`, `'gauge'`, `'waffle'`, `'histogram'`). The original requested
@@ -2694,19 +2700,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;
@@ -2753,9 +2759,9 @@ export type XChart = {
     dimension?: (row: any) => any;
     /** FILTER mode: reduction over a bucket's rows. @default 'count' */
     reduce?:
-      | 'count'
+    | 'count'
-      | { sum?: string; avg?: string; min?: string; max?: string }
+    | { sum?: string; avg?: string; min?: string; max?: string }
-      | ((rows: any[]) => number);
+    | ((rows: any[]) => number);
     /**
      * FILTER mode: bucket kind. Else inferred: `bins` present => 'range', a
      * heatmap chart => 'matrix' (2D), otherwise 'category'.
@@ -2873,21 +2879,21 @@ export type XChart = {
       | 'yline'
       | 'measure'
       | {
-          id?: string;
+        id?: string;
-          label?: string;
+        label?: string;
-          icon?: string;
+        icon?: string;
-          onClick?: (
+        onClick?: (
-            chart: ApexCharts,
+          chart: ApexCharts,
-            context: {
+          context: {
-              x: any;
+            x: any;
-              y: any;
+            y: any;
-              seriesIndex: number | null;
+            seriesIndex: number | null;
-              dataPointIndex: number | null;
+            dataPointIndex: number | null;
-              clientX: number;
+            clientX: number;
-              clientY: number;
+            clientY: number;
-            },
+          },
-          ) => void;
+        ) => void;
-        }
+      }
     >;
     /** Override the built-in item labels. */
     labels?: {
@@ -3226,7 +3232,7 @@ export enum XChartAction {
 
 export type XChartActionIdentifier = XChartAction | string;
 
-export interface XChartActionModel extends XBaseActionModel<XChartActionIdentifier> {}
+export interface XChartActionModel extends XBaseActionModel<XChartActionIdentifier> { }
 
 export type XChartSeriesType = XChartAxisChartSeries | XChartNonAxisChartSeries;
 
@@ -3263,7 +3269,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 +3330,18 @@ export interface IXChartContainer extends TXChartContainer {
   series: XStandardType<XChartSeriesType>;
   type: XStandardType<XChartTypeIdentifier>;
 
+  //
+  stroke: XStandardType<XChartStroke>;
+  colors: XStandardType<XChartColorType>;
+
+  //
+  xAxis: XStandardType<XChartXAxis>;
+  yAxis: XStandardType<XOneOrManyType<XChartYAxis>>;
+
+  //
+  tooltip: XStandardType<XChartTooltip>;
+  annotations: XStandardType<XChartAnnotations>;
+
   //
   title: XStandardType<XResourceIdentifier>;
   titleAlign: XStandardType<XChartTextAlignIdentifier>;
@@ -3461,24 +3479,39 @@ export interface IXChartContainer extends TXChartContainer {
 })
 export class XChartContainer
   extends XBaseContainer
-  implements Readonly<IXChartContainer>
+  implements Readonly<IXChartContainer> {
-{
   //
-  readonly cssClass: XStandardType<XOneOrManyType<string>>;
   readonly actionProvider = new Subject<XChartActionModel>();
+  readonly cssClass: XStandardType<XOneOrManyType<string>>;
 
   //
   // Chart Props ...
   readonly options: XStandardType<XChartOptions>;
   readonly zoomStep: XStandardType<number> = 0.125;
   readonly series: XStandardType<XChartSeriesType>;
+
+  //
+  readonly stroke: XStandardType<XChartStroke> = {
+    width: 3,
+    curve: 'smooth'
+  };
   readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
+  readonly colors: XStandardType<XChartColorType> = [getXColorValue(XColorWithBrightness.PrimaryShade)];
+
+  //
+  readonly xAxis: XStandardType<XChartXAxis>;
+  readonly yAxis: XStandardType<XOneOrManyType<XChartYAxis>>;
+
+  //
+  readonly tooltip: XStandardType<XChartTooltip>;
+  readonly annotations: XStandardType<XChartAnnotations>;
 
   //
   readonly title: XStandardType<XResourceIdentifier>;
   readonly titleAlign: XStandardType<XChartTextAlignIdentifier> =
     XChartTextAlign.Center;
 
+  //
   readonly subTitle: XStandardType<XResourceIdentifier>;
   readonly subTitleAlign: XStandardType<XChartTextAlignIdentifier> =
     XChartTextAlign.Center;
@@ -3654,16 +3687,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
 
   //
@@ -3681,8 +3704,7 @@ export class XChartContainer
 @Component({ template: `` })
 export abstract class XChartContainerComponent
   extends XBaseContainerComponent
-  implements IXChartContainer
+  implements IXChartContainer {
-{
   //
   //#region Props ...
   @Input()
@@ -3708,6 +3730,24 @@ export abstract class XChartContainerComponent
   @Input()
   zoomStep: XStandardType<number> = this.propertyProvider.zoomStep;
 
+  @Input()
+  xAxis: XStandardType<XChartXAxis> = this.propertyProvider.xAxis;
+
+  @Input()
+  yAxis: XStandardType<XOneOrManyType<XChartYAxis>> = this.propertyProvider.yAxis;
+
+  @Input()
+  colors: XStandardType<XChartColorType> = this.propertyProvider.colors;
+
+  @Input()
+  stroke: XStandardType<XChartStroke> = this.propertyProvider.stroke;
+
+  @Input()
+  tooltip: XStandardType<XChartTooltip> = this.propertyProvider.tooltip;
+
+  @Input()
+  annotations: XStandardType<XChartAnnotations> = this.propertyProvider.annotations;
+
   @Input()
   defaultActionBarItemColor: XStandardType<XColorIdentifier> =
     this.propertyProvider.defaultActionBarItemColor;
@@ -3969,26 +4009,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 +4064,7 @@ export abstract class XChartContainerComponent
       changeDetector,
     );
   }
-  //#endregion
+  //#endregionّ
 
   //
   //#region Abstract ...
@@ -4060,9 +4080,21 @@ 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),
+      
+      //
+      stroke: this.getValue(container ? container.stroke : this.stroke),
+      colors: this.getArrayValue(container ? container.colors : this.colors),
+
+      //
+      xAxis: this.getValue(container ? container.xAxis : this.xAxis),
+      yAxis: this.getValue(container ? container.yAxis : this.yAxis),
+
+      //
+      tooltip: this.getValue(container ? container.tooltip : this.tooltip),
+      annotations: this.getValue(container ? container.annotations : this.annotations),
 
       //
       title: this.getValue(container ? container.title : this.title),
@@ -4133,31 +4165,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
 
@@ -429,7 +421,7 @@ export class XComponentFileDropAreaContainer
 })
 @Component({
   template: `
-    <!--
+    <!-- 
         <ng-container *ngIf="extractProps() | async as props">
           <ng-container *ngIf="props.showFileDropArea">
             <x-file-drop-area
@@ -460,7 +452,7 @@ export class XComponentFileDropAreaContainer
               [supportsMultipleFiles]="props.fileDropAreaSupportsMultipleFiles"
             ></x-file-drop-area>
           </ng-container>
-        </ng-container>
+        </ng-container> 
     -->
   `,
 })
@@ -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