refactor(listeners.service): add focusin Trigger

Author: xidedix

projects/coreui-angular/src/lib/coreui.types.ts

@@ -8,7 +8,7 @@ export enum BreakpointInfix {
   md = 'md',
   lg = 'lg',
   xl = 'xl',
-  xxl = 'xxl'
+  xxl = 'xxl',
 }
 
 export type BreakpointInfixStrings = keyof typeof BreakpointInfix;
@@ -63,13 +63,7 @@ export type TextColors =
   | 'white-50'
   | string;
 
-export type Alignment =
-  | 'baseline'
-  | 'top'
-  | 'middle'
-  | 'bottom'
-  | 'text-top'
-  | 'text-bottom';
+export type Alignment = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom';
 
 export type BadgePositions =
   | 'top-start'
@@ -111,7 +105,7 @@ export type Shapes =
   | 'rounded-3'
   | string;
 
-export type Triggers = 'hover' | 'focus' | 'click';
+export type Triggers = 'hover' | 'focus' | 'click' | 'focusin';
 
 export type Positions = 'fixed' | 'sticky';
 

projects/coreui-angular/src/lib/services/listeners.service.spec.ts

@@ -1,22 +1,18 @@
-import { Renderer2 } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-
+import { Renderer2 } from '@angular/core';
 import { ListenersService } from './listeners.service';
 
 describe('ListenersService', () => {
-  let renderer: Renderer2;
-  let service: ListenersService;
-
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [Renderer2, ListenersService],
-      providers: [Renderer2]
+      providers: [Renderer2],
     });
-    service = new ListenersService(renderer);
-    // service = TestBed.inject(ListenersService);
   });
 
   it('should be created', () => {
-    expect(service).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const service = new ListenersService();
+      expect(service).toBeTruthy();
+    });
   });
 });

projects/coreui-angular/src/lib/services/listeners.service.ts

@@ -1,54 +1,53 @@
-import { ElementRef, Injectable, Renderer2 } from '@angular/core';
+import { ElementRef, inject, Injectable, Renderer2 } from '@angular/core';
 import { Triggers } from '../coreui.types';
 
 export interface IListenersConfig {
-  hostElement: ElementRef,
-  trigger?: Triggers | Triggers[],
-  callbackOn?: () => void,
-  callbackOff?: () => void,
-  callbackToggle?: () => void,
+  hostElement: ElementRef;
+  trigger?: Triggers | Triggers[];
+  callbackOn?: () => void;
+  callbackOff?: () => void;
+  callbackToggle?: () => void;
 }
 
 @Injectable()
 export class ListenersService {
+  readonly renderer = inject(Renderer2);
 
   private listeners: Map<string, () => void> = new Map();
 
-  constructor(
-    private renderer: Renderer2
-  ) {}
-
-  setListeners({ hostElement, trigger, callbackOn, callbackOff, callbackToggle }: IListenersConfig): void {
+  setListeners({
+    hostElement,
+    trigger,
+    callbackOn,
+    callbackOff,
+    callbackToggle,
+  }: IListenersConfig): void {
     const host = hostElement.nativeElement;
     const triggers = Array.isArray(trigger) ? trigger : trigger?.split(' ') ?? [];
 
     if (triggers?.includes('click')) {
-      typeof callbackToggle === 'function' && this.listeners.set(
-        'click',
-        this.renderer.listen(host, 'click', callbackToggle)
-      );
+      typeof callbackToggle === 'function' &&
+        this.listeners.set('click', this.renderer.listen(host, 'click', callbackToggle));
     }
     if (triggers?.includes('focus')) {
-      typeof callbackOn === 'function' && this.listeners.set(
-        'focus',
-        this.renderer.listen(host, 'focus', callbackOn)
-      );
+      typeof callbackOn === 'function' &&
+        this.listeners.set('focus', this.renderer.listen(host, 'focus', callbackOn));
+    }
+    if (triggers?.includes('focusin')) {
+      typeof callbackOff === 'function' &&
+        this.listeners.set('focusout', this.renderer.listen(host, 'focusout', callbackOff));
+      typeof callbackOn === 'function' &&
+        this.listeners.set('focusin', this.renderer.listen(host, 'focusin', callbackOn));
     }
     if (triggers?.includes('click') || triggers?.includes('focus')) {
-      typeof callbackOff === 'function' && this.listeners.set(
-        'blur',
-        this.renderer.listen(host, 'blur', callbackOff)
-      );
+      typeof callbackOff === 'function' &&
+        this.listeners.set('blur', this.renderer.listen(host, 'blur', callbackOff));
     }
     if (triggers?.includes('hover')) {
-      typeof callbackOn === 'function' && this.listeners.set(
-        'mouseenter',
-        this.renderer.listen(host, 'mouseenter', callbackOn)
-      );
-      typeof callbackOff === 'function' && this.listeners.set(
-        'mouseleave',
-        this.renderer.listen(host, 'mouseleave', callbackOff)
-      );
+      typeof callbackOn === 'function' &&
+        this.listeners.set('mouseenter', this.renderer.listen(host, 'mouseenter', callbackOn));
+      typeof callbackOff === 'function' &&
+        this.listeners.set('mouseleave', this.renderer.listen(host, 'mouseleave', callbackOff));
     }
   }