Font Size Test

apps/shared/shell/src/lib/shell.service.ts

@@ -1,13 +1,14 @@
 import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, inject } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { ToasterService } from './toaster/toaster.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ShellService {
-  private _fontSize$ = new BehaviorSubject<'small' | 'normal' | 'large'>('normal');
+  private _fontSize$ = new BehaviorSubject<'small' | 'normal' | 'large' | 'x-large'>('normal');
 
   fontSize$ = this._fontSize$.asObservable();
 
@@ -38,33 +39,41 @@ export class ShellService {
       } else {
         return 1;
       }
-    })
+    }),
   );
 
   private _sideMenuOpen$ = new BehaviorSubject<boolean>(false);
 
   sideMenuOpen$ = this._sideMenuOpen$.asObservable();
 
+  private toaster = inject(ToasterService);
+
   constructor(@Inject(DOCUMENT) private _document: Document) {
     this._fontSize$.next(this._getStoredFontSize());
 
     this._fontSize$.subscribe((size) => {
       if (size === 'small') {
         this._document.documentElement.style.setProperty('font-size', '13px');
+        this.toaster.open({ message: 'Font Size Set To 13px', type: 'info', closeAfter: 3000 });
       } else if (size === 'normal') {
         this._document.documentElement.style.setProperty('font-size', '16px');
+        this.toaster.open({ message: 'Font Size Set To 16px', type: 'info', closeAfter: 3000 });
       } else if (size === 'large') {
         this._document.documentElement.style.setProperty('font-size', '19px');
+        this.toaster.open({ message: 'Font Size Set To 19px', type: 'info', closeAfter: 3000 });
+      } else if (size === 'x-large') {
+        this._document.documentElement.style.setProperty('font-size', '22px');
+        this.toaster.open({ message: 'Font Size Set To 22px', type: 'info', closeAfter: 3000 });
       }
     });
   }
 
   private _getStoredFontSize() {
     const stored = localStorage.getItem('isa-app-font-size');
-    return stored ? (stored as 'small' | 'normal' | 'large') : 'normal';
+    return stored ? (stored as 'small' | 'normal' | 'large' | 'x-large') : 'normal';
   }
 
-  setFontSize(size: 'small' | 'normal' | 'large') {
+  setFontSize(size: 'small' | 'normal' | 'large' | 'x-large') {
     this._fontSize$.next(size);
     localStorage.setItem('isa-app-font-size', size);
   }

apps/shared/shell/src/lib/top-bar/top-bar.component.ts

@@ -26,17 +26,15 @@ export class ShellTopBarComponent implements OnInit {
   notifications$ = this._notificationsHub.notifications$;
 
   notificationCount$ = this.notifications$.pipe(
-    map((notifications) => Object.values(notifications).reduce((acc, val) => acc + val?.length ?? 0, 0))
+    map((notifications) => Object.values(notifications).reduce((acc, val) => acc + val?.length ?? 0, 0)),
   );
 
   branchKey$ = this._stockService.StockCurrentBranch().pipe(
     retry(3),
-    map((x) => x.result.key)
+    map((x) => x.result.key),
   );
 
-  canNotIncreaseFontSize$ = combineLatest([this._shellService.fontSize$, this.isTablet$]).pipe(
-    map(([size, isTablet]) => (isTablet ? size === 'normal' : size === 'large'))
-  );
+  canNotIncreaseFontSize$ = this._shellService.fontSize$.pipe(map((size) => size === 'x-large'));
 
   canNotDecreaseFontSize$ = this._shellService.fontSize$.pipe(map((size) => size === 'small'));
 
@@ -51,7 +49,7 @@ export class ShellTopBarComponent implements OnInit {
     private readonly _notificationsHub: NotificationsHub,
     private _modal: UiModalService,
     private _app: ApplicationService,
-    private _environment: EnvironmentService
+    private _environment: EnvironmentService,
   ) {}
 
   ngOnInit() {
@@ -83,13 +81,17 @@ export class ShellTopBarComponent implements OnInit {
       this._shellService.setFontSize('normal');
     } else if (current === 'normal') {
       this._shellService.setFontSize('large');
+    } else if (current === 'large') {
+      this._shellService.setFontSize('x-large');
     }
   }
 
   decreaseFontSize() {
     const current = this._shellService.fontSize;
 
-    if (current === 'large') {
+    if (current === 'x-large') {
+      this._shellService.setFontSize('large');
+    } else if (current === 'large') {
       this._shellService.setFontSize('normal');
     } else if (current === 'normal') {
       this._shellService.setFontSize('small');