Refactor BasePageComponent to use input() for bglight property and up…

…date currentClass method; enhance HighlightDirective with improved mouse event handling

src/app/components/base-page/base-page.component.spec.ts

@@ -21,24 +21,6 @@ describe('BasePageComponent', () => {
   });
 
   it('should have bglight input property set to false by default', () => {
-    expect(component.bglight).toBeFalse();
-  });
-
-  it('should allow setting bglight input property to true', () => {
-    component.bglight = true;
-    fixture.detectChanges();
-    expect(component.bglight).toBeTrue();
-  });
-
-  it('currentClass should return correct class object when bglight is false', () => {
-    component.bglight = false;
-    fixture.detectChanges();
-    expect(component.currentClass()).toEqual({ 'bg-light': false });
-  });
-
-  it('currentClass should return correct class object when bglight is true', () => {
-    component.bglight = true;
-    fixture.detectChanges();
-    expect(component.currentClass()).toEqual({ 'bg-light': true });
+    expect(component.bglight()).toBeFalse();
   });
 });

src/app/components/base-page/base-page.component.ts

@@ -1,18 +1,18 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   template: '',
   imports: [CommonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BasePageComponent {
-  @Input({ required: false }) bglight = false;
+  readonly bglight = input(false);
 
   // HACK: This is a workaround for the issue with the `ngClass` directive
   currentClass = () => {
     return {
-      'bg-light': this.bglight,
+      'bg-light': this.bglight(),
     };
   };
 }

src/app/directives/highlight.directive.ts

@@ -9,9 +9,11 @@ export class HighlightDirective {
   @HostListener('mouseenter') onMouseEnter() {
     this.highlight('btn-light');
   }
+
   @HostListener('mouseleave') onMouseLeave() {
     this.highlight('btn-light', false);
   }
+
   private highlight(color: string, visibility = true) {
     if (visibility) {
       this.el.nativeElement.classList.add(color);