refactor: eslint minor syntax cleanups

Author: xidedix

Diff for: projects/coreui-angular-chartjs/src/lib/chartjs.component.spec.ts

@@ -18,24 +18,24 @@ describe('ChartjsComponent', () => {
 
   const data = {
     labels: labels,
-    datasets: [{
-      data: [65, 59, 84, 84, 51, 55, 40],
-      ...colors,
-      fill: { value: 65 }
-    }]
+    datasets: [
+      {
+        data: [65, 59, 84, 84, 51, 55, 40],
+        ...colors,
+        fill: { value: 65 }
+      }
+    ]
   };
 
   beforeEach(async () => {
     Chart.register(...registerables);
 
     await TestBed.configureTestingModule({
       imports: [ChartjsComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {
-    // @ts-ignore
     fixture = TestBed.createComponent(ChartjsComponent);
     component = fixture.componentInstance;
     component.data = undefined;

Diff for: projects/coreui-angular-chartjs/src/lib/chartjs.component.ts

@@ -36,7 +36,6 @@ let nextId = 0;
   exportAs: 'cChart',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   // host: { ngSkipHydration: 'true' }
 })
 export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {

Diff for: projects/coreui-angular/src/lib/collapse/collapse.directive.ts

@@ -23,14 +23,12 @@ import {
 } from './collapse.animations';
 
 // todo
-// tslint:disable-next-line:no-conflicting-lifecycle
 @Directive({
   selector: '[cCollapse]',
   exportAs: 'cCollapse',
   standalone: true
 })
 export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterViewInit {
-
   /**
    * @ignore
    */

Diff for: projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts

@@ -53,14 +53,10 @@ let nextId = 0;
   exportAs: 'cOffcanvas',
   standalone: true,
   imports: [A11yModule],
-  hostDirectives: [
-    { directive: ThemeDirective, inputs: ['dark'] }
-  ],
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+  hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }],
   host: { ngSkipHydration: 'true' }
 })
 export class OffcanvasComponent implements OnInit, OnDestroy {
-
   #destroyRef = inject(DestroyRef);
 
   constructor(
@@ -196,7 +192,8 @@ export class OffcanvasComponent implements OnInit, OnDestroy {
     }
     const element: Element = this.document.documentElement;
     const responsiveBreakpoint = this.responsive;
-    const breakpointValue = getComputedStyle(element)?.getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`) ?? false;
+    const breakpointValue =
+      getComputedStyle(element)?.getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`) ?? false;
     return breakpointValue ? `${parseFloat(breakpointValue.trim()) - 0.02}px` : false;
   }
 
@@ -229,12 +226,7 @@ export class OffcanvasComponent implements OnInit, OnDestroy {
 
   @HostListener('document:keydown', ['$event'])
   onKeyDownHandler(event: KeyboardEvent): void {
-    if (
-      event.key === 'Escape' &&
-      this.keyboard &&
-      this.visible &&
-      this.backdrop !== 'static'
-    ) {
+    if (event.key === 'Escape' && this.keyboard && this.visible && this.backdrop !== 'static') {
       this.offcanvasService.toggle({ show: false, id: this.id });
     }
   }
@@ -258,46 +250,36 @@ export class OffcanvasComponent implements OnInit, OnDestroy {
   }
 
   private stateToggleSubscribe(): void {
-    this.offcanvasService.offcanvasState$
-      .pipe(
-        takeUntilDestroyed(this.#destroyRef)
-      )
-      .subscribe((action) => {
-        if (this === action.offcanvas || this.id === action.id) {
-          if ('show' in action) {
-            this.visible =
-              action?.show === 'toggle' ? !this.visible : action.show;
-          }
+    this.offcanvasService.offcanvasState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => {
+      if (this === action.offcanvas || this.id === action.id) {
+        if ('show' in action) {
+          this.visible = action?.show === 'toggle' ? !this.visible : action.show;
         }
-      });
+      }
+    });
   }
 
   private backdropClickSubscribe(subscribe: boolean = true): void {
     if (subscribe) {
-      this.#backdropClickSubscription =
-        this.backdropService.backdropClick$
-          .pipe(
-            takeUntilDestroyed(this.#destroyRef)
-          )
-          .subscribe((clicked) => {
-            this.offcanvasService.toggle({ show: !clicked, id: this.id });
-          });
+      this.#backdropClickSubscription = this.backdropService.backdropClick$
+        .pipe(takeUntilDestroyed(this.#destroyRef))
+        .subscribe((clicked) => {
+          this.offcanvasService.toggle({ show: !clicked, id: this.id });
+        });
     } else {
       this.#backdropClickSubscription?.unsubscribe();
     }
   }
 
   private setBackdrop(setBackdrop: boolean | 'static'): void {
-    this.#activeBackdrop = !!setBackdrop ? this.backdropService.setBackdrop('offcanvas')
-                                         : this.backdropService.clearBackdrop(this.#activeBackdrop);
-    setBackdrop === true ? this.backdropClickSubscribe()
-                         : this.backdropClickSubscribe(false);
+    this.#activeBackdrop = !!setBackdrop
+      ? this.backdropService.setBackdrop('offcanvas')
+      : this.backdropService.clearBackdrop(this.#activeBackdrop);
+    setBackdrop === true ? this.backdropClickSubscribe() : this.backdropClickSubscribe(false);
   }
 
   private layoutChangeSubscribe(subscribe: boolean = true): void {
-
     if (subscribe) {
-
       if (!this.responsiveBreakpoint) {
         return;
       }
@@ -308,14 +290,12 @@ export class OffcanvasComponent implements OnInit, OnDestroy {
 
       this.#layoutChangeSubscription = layoutChanges
         .pipe(
-          filter(breakpointState => !breakpointState.matches),
+          filter((breakpointState) => !breakpointState.matches),
           takeUntilDestroyed(this.#destroyRef)
         )
-        .subscribe(
-          (breakpointState: BreakpointState) => {
-            this.visible = breakpointState.matches;
-          }
-        );
+        .subscribe((breakpointState: BreakpointState) => {
+          this.visible = breakpointState.matches;
+        });
     } else {
       this.#layoutChangeSubscription?.unsubscribe();
     }

Diff for: projects/coreui-angular/src/lib/progress/progress-bar.directive.ts

@@ -20,7 +20,6 @@ import { IProgressBar } from './progress.type';
   standalone: true
 })
 export class ProgressBarDirective implements IProgressBar {
-
   constructor() {}
 
   readonly #renderer = inject(Renderer2);
@@ -32,13 +31,15 @@ export class ProgressBarDirective implements IProgressBar {
   readonly #width: WritableSignal<number | undefined> = signal(undefined);
 
   readonly percent = computed(() => {
-    return +((((this.#value() ?? this.#width() ?? 0) - this.#min) / (this.#max() - this.#min)) * 100).toFixed(this.precision);
+    return +((((this.#value() ?? this.#width() ?? 0) - this.#min) / (this.#max() - this.#min)) * 100).toFixed(
+      this.precision
+    );
   });
 
   readonly #valuesEffect: EffectRef = effect(() => {
     const host: HTMLElement = this.#hostElement.nativeElement;
     if (this.#value() === undefined || this.#width()) {
-      for (let name of ['aria-valuenow', 'aria-valuemax', 'aria-valuemin', 'role']) {
+      for (const name of ['aria-valuenow', 'aria-valuemax', 'aria-valuemin', 'role']) {
         this.#renderer.removeAttribute(host, name);
       }
     } else {
@@ -118,5 +119,4 @@ export class ProgressBarDirective implements IProgressBar {
    * @type string
    */
   @Input() role: string = 'progressbar';
-
 }

Diff for: projects/coreui-angular/src/lib/services/local-storage.service.ts

@@ -1,21 +1,20 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { inject, Injectable, PLATFORM_ID } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { InMemoryStorageService } from './in-memory-storage.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LocalStorageService {
+  private platformId = inject(PLATFORM_ID);
+  private document = inject(DOCUMENT);
 
-  constructor(
-    @Inject(PLATFORM_ID) private platformId: Object,
-    @Inject(DOCUMENT) private document: Document
-  ) {
+  constructor() {
     this.#localStorage =
       isPlatformBrowser(this.platformId) && this.document.defaultView
-      ? this.document.defaultView?.localStorage
-      : new InMemoryStorageService();
+        ? this.document.defaultView?.localStorage
+        : new InMemoryStorageService();
   }
 
   #localStorage: Storage;

Diff for: projects/coreui-angular/src/lib/shared/html-attr.directive.ts

@@ -6,7 +6,6 @@ import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
   standalone: true
 })
 export class HtmlAttributesDirective implements OnInit {
-
   @Input() cHtmlAttr?: { [key: string]: any };
 
   constructor(
@@ -17,7 +16,7 @@ export class HtmlAttributesDirective implements OnInit {
   ngOnInit(): void {
     const attribs = this.cHtmlAttr;
     for (const attr in attribs) {
-      if (attr === 'style' && typeof (attribs[attr]) === 'object') {
+      if (attr === 'style' && typeof attribs[attr] === 'object') {
         this.setStyle(attribs[attr]);
       } else if (attr === 'class') {
         this.addClass(attribs[attr]);
@@ -27,7 +26,7 @@ export class HtmlAttributesDirective implements OnInit {
     }
   }
 
-  private setStyle(styles: { [x: string]: any; }): void {
+  private setStyle(styles: { [x: string]: any }): void {
     for (const style in styles) {
       if (style) {
         this.renderer.setStyle(this.el.nativeElement, style, styles[style]);
@@ -36,15 +35,17 @@ export class HtmlAttributesDirective implements OnInit {
   }
 
   private addClass(classes: string | string[]): void {
-    const classArray = (Array.isArray(classes) ? classes : classes.split(' '));
-    classArray.filter((element) => element.length > 0).forEach(element => {
-      this.renderer.addClass(this.el.nativeElement, element);
-    });
+    const classArray = Array.isArray(classes) ? classes : classes.split(' ');
+    classArray
+      .filter((element) => element.length > 0)
+      .forEach((element) => {
+        this.renderer.addClass(this.el.nativeElement, element);
+      });
   }
 
   private setAttrib(key: string, value: string | null): void {
-    value !== null ?
-      this.renderer.setAttribute(this.el.nativeElement, key, value) :
-      this.renderer.removeAttribute(this.el.nativeElement, key);
+    value !== null
+      ? this.renderer.setAttribute(this.el.nativeElement, key, value)
+      : this.renderer.removeAttribute(this.el.nativeElement, key);
   }
 }

Diff for: projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts

@@ -26,9 +26,7 @@ import { SidebarNavIconPipe } from './sidebar-nav-icon.pipe';
 export class SidebarNavLinkContentComponent {
   @Input() item?: INavData;
 
-  constructor(
-    public helper: SidebarNavHelper
-  ) { }
+  constructor(public helper: SidebarNavHelper) {}
 }
 
 @Component({
@@ -49,8 +47,6 @@ export class SidebarNavLinkContentComponent {
   ]
 })
 export class SidebarNavLinkComponent implements OnInit, OnDestroy {
-
-  // tslint:disable-next-line:variable-name
   protected _item: INavData = {};
 
   @Input()
@@ -64,18 +60,13 @@ export class SidebarNavLinkComponent implements OnInit, OnDestroy {
 
   @Output() linkClick = new EventEmitter();
 
-  // @ts-ignore
-  public linkType: string;
-  // @ts-ignore
-  public href: string;
-  // @ts-ignore
-  public linkActive: boolean;
-  // @ts-ignore
-  private url: string;
+  public linkType!: string;
+  public href!: string;
+  public linkActive!: boolean;
+  private url!: string;
 
   private navigationEndObservable: Observable<NavigationEnd>;
-  // @ts-ignore
-  private navSubscription: Subscription;
+  private navSubscription!: Subscription;
 
   constructor(
     public router: Router
@@ -84,19 +75,21 @@ export class SidebarNavLinkComponent implements OnInit, OnDestroy {
     // private sidebarService: SidebarService
   ) {
     this.navigationEndObservable = router.events.pipe(
-      filter(event => {
+      filter((event) => {
         return event instanceof NavigationEnd;
       })
     ) as Observable<NavigationEnd>;
   }
 
   ngOnInit(): void {
-    // @ts-ignore
-    this.url = typeof this.item.url === 'string' ? this.item.url : this.router.serializeUrl(this.router.createUrlTree(this.item.url));
+    this.url =
+      typeof this.item.url === 'string'
+        ? this.item.url
+        : this.router.serializeUrl(this.router.createUrlTree(this.item.url as any[]));
     this.linkType = this.getLinkType();
-    this.href = this.isDisabled() ? '' : (this.item.href || this.url);
+    this.href = this.isDisabled() ? '' : this.item.href || this.url;
     this.linkActive = this.router.url.split(/[?#(;]/)[0] === this.href.split(/[?#(;]/)[0];
-    this.navSubscription = this.navigationEndObservable.subscribe(event => {
+    this.navSubscription = this.navigationEndObservable.subscribe((event) => {
       const itemUrlArray = this.href.split(/[?#(;]/)[0].split('/');
       const urlArray = event.urlAfterRedirects.split(/[?#(;]/)[0].split('/');
       this.linkActive = itemUrlArray.every((value, index) => value === urlArray[index]);