Replace unsafe/legacy types in ui-kit/components

eslint-baseline.json

@@ -1,4 +1,4 @@
 {
-  "root": 924,
+  "root": 457,
   "test-app": 0
 }

src/ui-kit/components/accordion/accordion.component.ts

@@ -8,6 +8,18 @@ import {
   OnInit,
 } from "@angular/core";
 
+/**
+ * Minimal shape of `SamAccordionComponent` needed by `SamAccordionSection`.
+ * Kept as an interface (rather than referencing the class type directly) so
+ * `emitDecoratorMetadata` does not emit a value reference to a class that is
+ * declared later in this file, which caused a "Cannot access before
+ * initialization" error when the class type was used directly.
+ */
+export interface AccordionParent {
+  sections: SamAccordionSection[];
+  addSection(section: SamAccordionSection): void;
+}
+
 /**
  * The <sam-accordion-section> component can generates content for a single
  * accordion item
@@ -38,7 +50,7 @@ export class SamAccordionSection implements OnInit {
 
   constructor(
     @Inject(forwardRef(() => SamAccordionComponent))
-    private parent: any
+    private parent: AccordionParent
   ) {
     this.parent.addSection(this);
   }

src/ui-kit/components/accordion/accordion.spec.ts

@@ -1,6 +1,7 @@
 import {
   waitForAsync,
   ComponentFixtureAutoDetect,
+  ComponentFixture,
   TestBed,
 } from "@angular/core/testing";
 import { Component } from "@angular/core";
@@ -57,7 +58,11 @@ class AccordionBordered {}
 })
 class AccordionInitialized {}
 
-function getComponent(fix: any) {
+function getComponent(
+  fix: ComponentFixture<
+    AccordionDefault | AccordionBordered | AccordionInitialized
+  >
+): SamAccordionComponent {
   return fix.debugElement.query(By.directive(SamAccordionComponent))
     .componentInstance;
 }
@@ -125,7 +130,9 @@ describe("The Sam Accordion component", () => {
 
   describe("integration tests", () => {
     let component: SamAccordionComponent;
-    let fixture: any;
+    let fixture: ComponentFixture<
+      AccordionDefault | AccordionBordered | AccordionInitialized
+    >;
 
     beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({

src/ui-kit/components/actions/action-button/action-button.component.ts

@@ -18,11 +18,12 @@ export class SamActionButton {
   /**
    * EventEmitter that emits action name when button is clicked
    */
-  @Output() emitAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() emitAction: EventEmitter<SamActionInterface> =
+    new EventEmitter<SamActionInterface>();
   /**
    * Emits the results of the callback
    */
-  @Output() emitCallback: EventEmitter<any> = new EventEmitter<any>();
+  @Output() emitCallback: EventEmitter<unknown> = new EventEmitter<unknown>();
 
   actionClicked() {
     this.emitCallback.emit(this.action.callback());

src/ui-kit/components/actions/action-button/action-button.spec.ts

@@ -3,6 +3,7 @@ import { By } from "@angular/platform-browser";
 import { DebugElement } from "@angular/core";
 
 import { SamActionButton } from "./action-button.component";
+import { SamActionInterface } from "../action-interface";
 
 describe("The SAM Action Button Component", () => {
   let comp: SamActionButton;
@@ -44,7 +45,7 @@ describe("The SAM Action Button Component", () => {
   });
 
   it("Should disable button when disabled is set", () => {
-    const element: any = de.query(By.css("button")).nativeElement;
+    const element: HTMLButtonElement = de.query(By.css("button")).nativeElement;
     comp.disabled = true;
     fixture.detectChanges();
 
@@ -54,8 +55,8 @@ describe("The SAM Action Button Component", () => {
   it("Should emit callback results on button click", () => {
     const button = de.query(By.css("button"));
 
-    let emittedResult: any;
-    comp.emitCallback.subscribe((_: any) => {
+    let emittedResult: unknown;
+    comp.emitCallback.subscribe((_: unknown) => {
       emittedResult = _;
     });
     fixture.detectChanges();
@@ -68,8 +69,8 @@ describe("The SAM Action Button Component", () => {
   it("Should emit action when button is clicked", () => {
     const button = de.query(By.css("button"));
 
-    let emittedAction: any;
-    comp.emitAction.subscribe((_: any) => {
+    let emittedAction: SamActionInterface;
+    comp.emitAction.subscribe((_: SamActionInterface) => {
       emittedAction = _;
     });
     fixture.detectChanges();

src/ui-kit/components/actions/action-interface.ts

@@ -2,5 +2,5 @@ export interface SamActionInterface {
   icon?: string;
   label: string;
   name: string;
-  callback?: Function;
+  callback?: (...args: never[]) => unknown;
 }

src/ui-kit/components/actions/actions-dropdown/actions-dropdown.component.ts

@@ -5,6 +5,8 @@ import {
   EventEmitter,
   ViewChild,
   ViewChildren,
+  ElementRef,
+  QueryList,
 } from "@angular/core";
 
 import { KeyHelper, KEYS } from "../../../utilities/key-helper/key-helper";
@@ -41,15 +43,17 @@ export class SamActionsDropdownComponent {
   /**
    * Emits event when action changes
    */
-  @Output() public emitAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() public emitAction: EventEmitter<SamActionInterface> =
+    new EventEmitter<SamActionInterface>();
   /**
    * Emits result of callback
    */
-  @Output() public emitCallback: EventEmitter<any> = new EventEmitter<any>();
+  @Output() public emitCallback: EventEmitter<unknown> =
+    new EventEmitter<unknown>();
 
-  @ViewChildren("actionsList") public actionsList;
+  @ViewChildren("actionsList") public actionsList: QueryList<ElementRef>;
 
-  @ViewChild("actionButton", { static: true }) public actionButton;
+  @ViewChild("actionButton", { static: true }) public actionButton: ElementRef;
 
   showActions = false;
   focusIndex = -1;
@@ -68,7 +72,7 @@ export class SamActionsDropdownComponent {
     }
   }
 
-  chooseAction(action) {
+  chooseAction(action: SamActionInterface) {
     this.toggleActions();
     this.emitAction.emit(action);
     if (action.callback) {
@@ -77,7 +81,7 @@ export class SamActionsDropdownComponent {
     return;
   }
 
-  leadKeyDownHandler(event) {
+  leadKeyDownHandler(event: KeyboardEvent) {
     if (KeyHelper.is(KEYS.DOWN, event) && !this.showActions) {
       this.toggleActions();
       event.preventDefault();
@@ -100,7 +104,7 @@ export class SamActionsDropdownComponent {
     }
   }
 
-  keyDownHandler(event) {
+  keyDownHandler(event: KeyboardEvent) {
     if (KeyHelper.is(KEYS.DOWN, event)) {
       if (this.focusIndex + 1 < this.actionsList.toArray().length) {
         this.focusIndex++;

src/ui-kit/components/actions/actions-dropdown/actions-dropdown.spec.ts

@@ -3,35 +3,36 @@ import { By } from "@angular/platform-browser";
 import { DebugElement } from "@angular/core";
 
 import { SamActionsDropdownComponent } from "./actions-dropdown.component";
+import { SamActionInterface } from "../action-interface";
 
 describe("The Sam Actions Dropdown Component", () => {
   let component: SamActionsDropdownComponent;
   let fixture: ComponentFixture<SamActionsDropdownComponent>;
   let de: DebugElement;
   let actionButton: HTMLButtonElement;
-  let emittedAction: any;
-  let emittedCallbackResult: any;
+  let emittedAction: SamActionInterface;
+  let emittedCallbackResult: unknown;
   const dummyUpEvent = {
     key: "Up",
     preventDefault: function () {},
     stopPropagation: function () {},
-  };
+  } as unknown as KeyboardEvent;
   const dummyDownEvent = {
     key: "Down",
     preventDefault: function () {},
     stopPropagation: function () {},
-  };
+  } as unknown as KeyboardEvent;
   const dummyEscEvent = {
     key: "Esc",
     preventDefault: function () {},
     stopPropagation: function () {},
-  };
+  } as unknown as KeyboardEvent;
 
   const callback = () => {
     return "success";
   };
 
-  const actions: Array<any> = [
+  const actions: Array<SamActionInterface> = [
     { name: "edit", label: "Edit", icon: "fa fa-pencil", callback: callback },
     {
       callback: callback,
@@ -52,10 +53,10 @@ describe("The Sam Actions Dropdown Component", () => {
 
     component.actions = actions;
     component.disabled = false;
-    component.emitAction.subscribe((_: any) => {
+    component.emitAction.subscribe((_: SamActionInterface) => {
       emittedAction = _;
     });
-    component.emitCallback.subscribe((_: any) => {
+    component.emitCallback.subscribe((_: unknown) => {
       emittedCallbackResult = _;
     });
 

src/ui-kit/components/alert-footer/alert-footer.service.ts

@@ -2,17 +2,17 @@ import { Injectable } from "@angular/core";
 import { AlertType } from "../../types";
 @Injectable()
 export class SamAlertFooterService {
-  private alerts: any = [];
+  private alerts: AlertType[] = [];
 
-  getAlerts() {
+  getAlerts(): AlertType[] {
     return this.alerts;
   }
 
   registerFooterAlert(data: AlertType) {
     this.alerts.unshift(data);
   }
 
-  dismissFooterAlert(i) {
+  dismissFooterAlert(i: number) {
     this.alerts = this.alerts.filter(function (obj, idx) {
       if (idx === i) {
         return false;

src/ui-kit/components/alert-footer/alert-footer.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, inject } from "@angular/core/testing";
+import { ComponentFixture, TestBed, inject } from "@angular/core/testing";
 
 // Load the implementations that should be tested
 import { SamAlertFooterComponent, SamAlertFooterService } from "./index";
@@ -45,7 +45,7 @@ describe("The AlertFooter component", () => {
   });
   describe("rendered tests", () => {
     let component: SamAlertFooterComponent;
-    let fixture: any;
+    let fixture: ComponentFixture<SamAlertFooterComponent>;
 
     beforeEach(() => {
       TestBed.configureTestingModule({
@@ -60,7 +60,7 @@ describe("The AlertFooter component", () => {
 
     it("should show 1 alert", inject(
       [SamAlertFooterService],
-      (alertFooterService) => {
+      (alertFooterService: SamAlertFooterService) => {
         fixture.detectChanges();
         alertFooterService.registerFooterAlert({
           description: "test",

src/ui-kit/components/alert/alert.component.ts

@@ -43,13 +43,13 @@
   /**
    * Emitted event when an alert is dismissed
    */
-  @Output() dismiss: EventEmitter<any> = new EventEmitter<any>();
+  @Output() dismiss: EventEmitter<void> = new EventEmitter<void>();
   /**
    * Emitted event when toggling content
    */
-  @Output() toggle: EventEmitter<any> = new EventEmitter<any>();
+  @Output() toggle: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  types: any = {
+  types: Record<string, { class: string; sr: string }> = {
     error: { class: "usa-alert-error", sr: "error alert" },
     info: { class: "usa-alert-info", sr: "info alert" },
     success: { class: "usa-alert-success", sr: "success alert" },

src/ui-kit/components/alert/alert.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { RouterTestingModule } from "@angular/router/testing";
 import { By } from "@angular/platform-browser";
 
@@ -68,7 +68,7 @@ describe("The Sam Alert component", () => {
   });
   describe("rendered tests", () => {
     let component: SamAlertComponent;
-    let fixture: any;
+    let fixture: ComponentFixture<SamAlertComponent>;
 
     beforeEach(() => {
       TestBed.configureTestingModule({

src/ui-kit/components/banner/banner.spec.ts

@@ -1,11 +1,11 @@
-import { TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 // Load the implementations that should be tested
 import { SamBannerComponent } from "./banner.component";
 
 describe("The Sam Banner component", () => {
   let component: SamBannerComponent;
-  let fixture: any;
+  let fixture: ComponentFixture<SamBannerComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({

src/ui-kit/components/breadcrumbs/breadcrumbs.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { Subscription } from "rxjs";
 import { IBreadcrumb } from "../../types";
 
 @Component({
@@ -15,9 +16,10 @@ export class SamBreadcrumbsComponent {
   /**
    * Emits when crumb action occurs
    */
-  @Output() public crumbAction = new EventEmitter();
+  @Output() public crumbAction: EventEmitter<string> =
+    new EventEmitter<string>();
 
-  private _routeSubscription: any;
+  private _routeSubscription: Subscription;
   private count = 0;
 
   public crumbHandler(crumb: string) {

src/ui-kit/components/breadcrumbs/breadcrumbs.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { RouterTestingModule } from "@angular/router/testing";
 
@@ -21,7 +21,7 @@ describe("The Sam Breadcrumbs component", () => {
   });
   describe("rendered tests", () => {
     let component: SamBreadcrumbsComponent;
-    let fixture: any;
+    let fixture: ComponentFixture<SamBreadcrumbsComponent>;
 
     beforeEach(() => {
       TestBed.configureTestingModule({

src/ui-kit/components/comments/comment/comment.component.ts

@@ -19,7 +19,7 @@ export class SamCommentComponent {
   /**
    * Emits when delete action occurs
    */
-  @Output() delete: EventEmitter<any> = new EventEmitter<any>();
+  @Output() delete: EventEmitter<Comment> = new EventEmitter<Comment>();
 
   emitClick() {
     this.delete.emit(this.comment);

src/ui-kit/components/comments/comment/comment.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 import moment from "moment";
 import { By } from "@angular/platform-browser";
 
@@ -9,7 +9,7 @@ import { SamCommentComponent } from "./";
 
 describe("The Sam Comment component", () => {
   let component: SamCommentComponent;
-  let fixture: any;
+  let fixture: ComponentFixture<SamCommentComponent>;
   const imgUrl =
     "https://upload.wikimedia.org/wikipedia/commons/c/c6/Georgewashington.jpg";