perf(directives): add state to the full screen directive

libs/client-dashboards/src/lib/components/table/table.component.html

@@ -8,7 +8,11 @@
           <span class="separator"></span>
 
           <button mat-icon-button (click)="fullScreen.toggle()">
-            <mat-icon>fullscreen</mat-icon>
+            @if (fullScreen.enabled$()) {
+              <mat-icon>close_fullscreen</mat-icon>
+            } @else {
+              <mat-icon>open_in_full</mat-icon>
+            }
           </button>
 
           <app-table-column-settings

libs/client-directives/src/lib/full-screen/full-screen.directive.ts

@@ -8,18 +8,27 @@ interface IStyleConfiguration {
   bottom: string;
 }
 
-/**
- * Full screen directive.
- */
+/** Full screen directive. */
 @Directive({
   selector: '[appFullScreen]',
   exportAs: 'fullScreen',
 })
 export class AppFullScreenDirective {
+  /** Original styles of the component. */
   private readonly originalStyles = signal<IStyleConfiguration | null>(null);
 
+  /** Full screen state. */
+  public readonly enabled$ = signal<boolean>(false);
+
+  /**
+   * @param el Element reference.
+   */
   constructor(private readonly el: ElementRef<HTMLElement>) {}
 
+  /**
+   * Create a copy of the original styles.
+   * @param el HTML element.
+   */
   private backUpStyles(el: HTMLElement) {
     const styles: IStyleConfiguration = {
       width: el.style.width,
@@ -31,6 +40,10 @@ export class AppFullScreenDirective {
     this.originalStyles.set(styles);
   }
 
+  /**
+   * Restore original styles from a copy.
+   * @param el HTML element.
+   */
   private restoreStyles(el: HTMLElement) {
     const styles = this.originalStyles();
     if (styles !== null) {
@@ -43,6 +56,10 @@ export class AppFullScreenDirective {
     }
   }
 
+  /**
+   * Set element styles.
+   * @param el HTML element.
+   */
   private setStyles(el: HTMLElement) {
     el.style.width = '100vw';
     el.style.height = '100vw';
@@ -51,6 +68,7 @@ export class AppFullScreenDirective {
     el.style.bottom = '0';
   }
 
+  /** Toggle full screen. */
   public toggle(): void {
     const fullScreen = this.originalStyles();
     switch (fullScreen) {
@@ -63,18 +81,22 @@ export class AppFullScreenDirective {
     }
   }
 
+  /** Enable full screen mode. */
   public maximize(): void {
     const el = this.el.nativeElement;
     if (typeof el !== 'undefined') {
       this.backUpStyles(el);
       this.setStyles(el);
+      this.enabled$.set(true);
     }
   }
 
+  /** Disable full screen mode. */
   public minimize(): void {
     const el = this.el.nativeElement;
     if (typeof el !== 'undefined') {
       this.restoreStyles(el);
+      this.enabled$.set(false);
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app/nx-ng-starter",
-  "version": "7.6.6",
+  "version": "7.6.7",
   "private": true,
   "description": "Monorepo starter: Nx, Angular, Angular Elements, Electron, NodeJS, NestJS, Firebase.",
   "license": "MIT",