responsive header

Author: lexCoder2

eslint.config.js

@@ -31,6 +31,8 @@ module.exports = defineConfig([
           style: "kebab-case",
         },
       ],
+      // eslint-disable-next-line
+      "@angular-eslint/template/click-events-have-key-events": "off",
     },
   },
   {

src/app/components/cart/cart.component.ts

@@ -1,4 +1,11 @@
-import { Component, Input, Output, EventEmitter, signal } from "@angular/core";
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  signal,
+  inject,
+} from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { TranslatePipe } from "../../pipes/translate.pipe";
 import { CurrencyPipe } from "../../pipes/currency.pipe";
@@ -14,6 +21,8 @@ import { environment } from "@environments/environment";
   styleUrls: ["./cart.component.scss"],
 })
 export class CartComponent {
+  cartService = inject(CartService);
+
   @Input() cartItems: CartItem[] = [];
   @Input() salesTabs: { items: CartItem[] }[] = [];
   @Input() activeSaleTabIndex = 0;
@@ -34,7 +43,10 @@ export class CartComponent {
   @Output() internalSale = new EventEmitter<void>();
   @Output() closeMobileCart = new EventEmitter<void>();
 
-  constructor(public cartService: CartService) {}
+  /** Inserted by Angular inject() migration for backwards compatibility */
+  constructor(...args: unknown[]);
+
+  constructor() {}
 
   getItemsBySupplier(): { supplier: string; items: CartItem[] }[] {
     const groups: Record<string, CartItem[]> = {};

src/app/components/cashier/cashier.component.ts

@@ -7,6 +7,7 @@ import {
   ElementRef,
   AfterViewInit,
   OnInit,
+  inject,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
@@ -47,6 +48,16 @@ import { OpenRegisterComponent } from "../open-register/open-register.component"
   styleUrls: ["./cashier.component.scss"],
 })
 export class CashierComponent implements OnInit, AfterViewInit {
+  private saleService = inject(SaleService);
+  private cartService = inject(CartService);
+  private authService = inject(AuthService);
+  currencyService = inject(CurrencyService);
+  private scaleService = inject(ScaleService);
+  private receiptGeneratorService = inject(ReceiptGeneratorService);
+  private registerService = inject(RegisterService);
+  private toastService = inject(ToastService);
+  private router = inject(Router);
+
   @ViewChild(CalculatorComponent)
   calculator!: CalculatorComponent;
   @ViewChild("cashReceivedInput")
@@ -140,17 +151,10 @@ export class CashierComponent implements OnInit, AfterViewInit {
     });
   }
 
-  constructor(
-    private saleService: SaleService,
-    private cartService: CartService,
-    private authService: AuthService,
-    public currencyService: CurrencyService,
-    private scaleService: ScaleService,
-    private receiptGeneratorService: ReceiptGeneratorService,
-    private registerService: RegisterService,
-    private toastService: ToastService,
-    private router: Router
-  ) {
+  /** Inserted by Angular inject() migration for backwards compatibility */
+  constructor(...args: unknown[]);
+
+  constructor() {
     // Subscribe to scale readings
     effect(() => {
       this.scaleService.currentWeight$.subscribe((reading) => {

src/app/components/client-screen/client-screen.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, signal } from "@angular/core";
+import { Component, OnInit, OnDestroy, signal, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, ActivatedRoute } from "@angular/router";
 import { CartService } from "../../services/cart.service";
@@ -15,6 +15,11 @@ import { environment } from "@environments/environment";
   styleUrls: ["./client-screen.component.scss"],
 })
 export class ClientScreenComponent implements OnInit, OnDestroy {
+  private cartService = inject(CartService);
+  private authService = inject(AuthService);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+
   cartItems$ = this.cartService.cartItems$;
   // activeTab controls which panel is visible: 'fast' = Fast Cashier, 'pos' = POS Sales
   activeTab: "fast" | "pos" = "pos";
@@ -28,12 +33,10 @@ export class ClientScreenComponent implements OnInit, OnDestroy {
   private cartPollTimer: any;
 
   apiUrl = environment.apiUrl;
-  constructor(
-    private cartService: CartService,
-    private authService: AuthService,
-    private router: Router,
-    private route: ActivatedRoute
-  ) {}
+
+  /** Inserted by Angular inject() migration for backwards compatibility */
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit(): void {
     const user = this.authService.getCurrentUser();

src/app/components/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, signal } from "@angular/core";
+import { Component, OnInit, signal, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router } from "@angular/router";
 import { TranslatePipe } from "../../pipes/translate.pipe";
@@ -49,6 +49,12 @@ interface DashboardStats {
   styleUrls: ["./dashboard.component.scss"],
 })
 export class DashboardComponent implements OnInit {
+  private saleService = inject(SaleService);
+  private productService = inject(ProductService);
+  private userService = inject(UserService);
+  private authService = inject(AuthService);
+  private router = inject(Router);
+
   stats = signal<DashboardStats>({
     totalSales: 0,
     totalRevenue: 0,
@@ -64,13 +70,10 @@ export class DashboardComponent implements OnInit {
   isLoading = signal<boolean>(true);
   currentUser = this.authService.getCurrentUser();
 
-  constructor(
-    private saleService: SaleService,
-    private productService: ProductService,
-    private userService: UserService,
-    private authService: AuthService,
-    private router: Router
-  ) {}
+  /** Inserted by Angular inject() migration for backwards compatibility */
+  constructor(...args: unknown[]);
+
+  constructor() {}
 
   ngOnInit(): void {
     this.loadDashboardData();

src/app/components/favorites/favorites.component.ts

@@ -5,6 +5,7 @@ import {
   Output,
   EventEmitter,
   signal,
+  inject,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Subject, takeUntil, timeout, catchError, of } from "rxjs";
@@ -22,14 +23,19 @@ import { environment } from "@environments/environment";
   styleUrls: ["./favorites.component.scss"],
 })
 export class FavoritesComponent implements OnInit, OnDestroy {
+  private productService = inject(ProductService);
+
   @Output() productSelected = new EventEmitter<Product>();
 
   products: Product[] = [];
   isLoading = signal(false);
   loadError = signal(false);
   private destroy$ = new Subject<void>();
 
-  constructor(private productService: ProductService) {}
+  /** Inserted by Angular inject() migration for backwards compatibility */
+  constructor(...args: unknown[]);
+
+  constructor() {}
 
   ngOnInit(): void {
     this.loadTopProducts();

src/app/components/global-search/global-search.component.html

@@ -10,10 +10,8 @@
       (keypress)="onSearchKeyPress($event)"
       [placeholder]="'GLOBAL.SEARCH_PLACEHOLDER' | translate"
     />
-    <i
-      *ngIf="searchQuery"
-      class="fas fa-times clear-icon"
-      (click)="searchQuery = ''"
-    ></i>
+    @if (searchQuery) {
+      <i class="fas fa-times clear-icon" (click)="searchQuery = ''"></i>
+    }
   </div>
 </div>

src/app/components/global-search/global-search.component.scss

@@ -57,11 +57,16 @@
 // Responsive
 @media (max-width: $breakpoint-md) {
   .global-search {
-    max-width: 100%;
+    width: 100%;
 
     .search-wrapper {
       .search-input {
         font-size: $font-size-sm;
+
+        padding-right: $spacing-sm;
+      }
+      .clear-icon {
+        right: $spacing-sm;
       }
     }
   }

src/app/components/global-search/global-search.component.ts

@@ -5,6 +5,7 @@ import {
   ViewChild,
   ElementRef,
   HostListener,
+  inject,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
@@ -25,6 +26,12 @@ import { TranslatePipe } from "@app/pipes/translate.pipe";
   styleUrls: ["./global-search.component.scss"],
 })
 export class GlobalSearchComponent implements OnInit, OnDestroy {
+  private productService = inject(ProductService);
+  private cartService = inject(CartService);
+  private searchStateService = inject(SearchStateService);
+  private router = inject(Router);
+  private toastService = inject(ToastService);
+
   searchQuery = "";
   private searchSubject = new Subject<string>();
   private destroy$ = new Subject<void>();
@@ -34,13 +41,10 @@ export class GlobalSearchComponent implements OnInit, OnDestroy {
   @ViewChild("globalSearchInput")
   globalSearchInput!: ElementRef<HTMLInputElement>;
 
-  constructor(
-    private productService: ProductService,
-    private cartService: CartService,
-    private searchStateService: SearchStateService,
-    private router: Router,
-    private toastService: ToastService
-  ) {}
+  /** Inserted by Angular inject() migration for backwards compatibility */
+  constructor(...args: unknown[]);
+
+  constructor() {}
 
   ngOnInit(): void {
     // Setup search debouncing

src/app/components/inventory-session/inventory-session.component.ts

@@ -5,6 +5,7 @@ import {
   ViewChild,
   ElementRef,
   signal,
+  inject,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
@@ -52,6 +53,14 @@ interface InventorySession {
   styleUrls: ["./inventory-session.component.scss"],
 })
 export class InventorySessionComponent implements OnInit, OnDestroy {
+  private productService = inject(ProductService);
+  private authService = inject(AuthService);
+  private toastService = inject(ToastService);
+  private translation = inject(TranslationService);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  private searchStateService = inject(SearchStateService);
+
   private destroy$ = new Subject<void>();
   currentUser: User | null = null;
 
@@ -74,15 +83,10 @@ export class InventorySessionComponent implements OnInit, OnDestroy {
     return environment.apiUrl;
   }
 
-  constructor(
-    private productService: ProductService,
-    private authService: AuthService,
-    private toastService: ToastService,
-    private translation: TranslationService,
-    private router: Router,
-    private route: ActivatedRoute,
-    private searchStateService: SearchStateService
-  ) {}
+  /** Inserted by Angular inject() migration for backwards compatibility */
+  constructor(...args: unknown[]);
+
+  constructor() {}
 
   ngOnInit(): void {
     this.currentUser = this.authService.getCurrentUser();