feat: Enable additional eslint rules (#397)

.eslintrc.json

@@ -49,6 +49,13 @@
             "style": "kebab-case"
           }
         ],
+        "@angular-eslint/prefer-on-push-component-change-detection": ["off"],
+        "@angular-eslint/prefer-output-readonly": ["error"],
+        "@angular-eslint/prefer-standalone": ["warn"],
+        "@angular-eslint/relative-url-prefix": ["error"],
+        "@angular-eslint/use-component-view-encapsulation": ["error"],
+        "@angular-eslint/use-injectable-provided-in": ["error"],
+        "@angular-eslint/use-lifecycle-interface": ["error"],
         "@typescript-eslint/no-explicit-any": ["off"],
         "@typescript-eslint/no-unused-vars": [
           "warn",
@@ -106,7 +113,23 @@
       "extends": [
         "plugin:@angular-eslint/template/recommended"
       ],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/template/alt-text": ["error"],
+        "@angular-eslint/template/button-has-type": ["error"],
+        "@angular-eslint/template/click-events-have-key-events": ["error"],
+        "@angular-eslint/template/elements-content": ["error"],
+        "@angular-eslint/template/interactive-supports-focus": ["error"],
+        "@angular-eslint/template/label-has-associated-control": ["error"],
+        "@angular-eslint/template/mouse-events-have-key-events": ["error"],
+        "@angular-eslint/template/no-any": ["error"],
+        "@angular-eslint/template/no-distracting-elements": ["error"],
+        "@angular-eslint/template/prefer-control-flow": ["error"],
+        "@angular-eslint/template/prefer-ngsrc": ["error"],
+        "@angular-eslint/template/prefer-self-closing-tags": ["error"],
+        "@angular-eslint/template/role-has-required-aria": ["error"],
+        "@angular-eslint/template/table-scope": ["error"],
+        "@angular-eslint/template/valid-aria": ["error"]
+      }
     },
     {
       "files": [

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div class="app-container">
 	<site-container>
-		<router-outlet></router-outlet>
+		<router-outlet />
 	</site-container>
 </div>

src/app/common/breadcrumb/breadcrumb.component.ts

@@ -9,8 +9,8 @@ import { Breadcrumb, BreadcrumbService } from './breadcrumb.service';
 
 @Component({
 	selector: 'breadcrumb',
-	templateUrl: 'breadcrumb.component.html',
-	styleUrls: ['breadcrumb.component.scss'],
+	templateUrl: './breadcrumb.component.html',
+	styleUrls: ['./breadcrumb.component.scss'],
 	standalone: true,
 	imports: [RouterLink]
 })

src/app/common/dialog/bs-dialog-container/bs-dialog-container.component.html

@@ -1,5 +1,5 @@
 <div class="modal-dialog modal-dialog-scrollable modal-lg">
 	<div class="modal-content">
-		<ng-template cdkPortalOutlet></ng-template>
+		<ng-template cdkPortalOutlet />
 	</div>
 </div>

src/app/common/dialog/configurable-dialog/configurable-dialog.component.html

@@ -13,10 +13,13 @@
 	<form id="modalForm" #modalForm="ngForm">
 		@for (input of data.inputs; track input; let isFirst = $first) {
 			<div class="mb-3">
-				<label [class.form-required]="input.required">{{ input.label }}</label>
+				<label [class.form-required]="input.required" for="dialog-input-{{ input.key }}">
+					{{ input.label }}
+				</label>
 				@if (input.type === 'textarea') {
 					<textarea
 						class="form-control text-area"
+						id="dialog-input-{{ input.key }}"
 						[name]="input.key"
 						placeholder="Enter {{ input.label }}..."
 						[(ngModel)]="formData[input.key]"

src/app/common/flyout/flyout.component.html

@@ -2,13 +2,14 @@
 	<button
 		class="btn btn-primary flyout-btn d-flex align-items-center"
 		data-inline="true"
+		type="button"
 		(click)="toggle()"
 	>
 		{{ label() }}
 		<span class="fa-solid fa-lg fa-angle-down ms-2" data-inline="true"></span>
 	</button>
 
 	<div class="flyout-content" #flyoutContentContainer>
-		<ng-content></ng-content>
+		<ng-content />
 	</div>
 </section>

src/app/common/loading-overlay/loading-overlay.component.html

@@ -3,12 +3,14 @@
 		@if (isError()) {
 			<notification notificationType="danger" showActions [message]="errorMessage()">
 				<ng-template #notificationActions>
-					<button class="btn btn-primary" (click)="retry.emit()">Retry</button>
+					<button class="btn btn-primary" type="button" (click)="retry.emit()">
+						Retry
+					</button>
 				</ng-template>
 			</notification>
 		} @else {
 			<div class="overlay-spinner">
-				<loading-spinner [message]="message()"> </loading-spinner>
+				<loading-spinner [message]="message()" />
 			</div>
 		}
 	</div>

src/app/common/loading-overlay/loading-overlay.component.ts

@@ -5,8 +5,8 @@ import { NotificationComponent } from '../notification/notification.component';
 
 @Component({
 	selector: 'loading-overlay',
-	templateUrl: 'loading-overlay.component.html',
-	styleUrls: ['loading-overlay.component.scss'],
+	templateUrl: './loading-overlay.component.html',
+	styleUrls: ['./loading-overlay.component.scss'],
 	standalone: true,
 	imports: [NotificationComponent, LoadingSpinnerComponent],
 	changeDetection: ChangeDetectionStrategy.OnPush

src/app/common/loading-spinner/loading-spinner.component.spec.ts

@@ -4,14 +4,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LoadingSpinnerComponent } from './loading-spinner.component';
 
 @Component({
-	template: '<loading-spinner></loading-spinner>',
+	template: '<loading-spinner />',
 	standalone: true,
 	imports: [LoadingSpinnerComponent]
 })
 export class LoadingSpinnerDefaultTestHostComponent {}
 
 @Component({
-	template: '<loading-spinner [message]="message"></loading-spinner>',
+	template: '<loading-spinner [message]="message" />',
 	standalone: true,
 	imports: [LoadingSpinnerComponent]
 })

src/app/common/loading-spinner/loading-spinner.component.ts

@@ -2,8 +2,8 @@ import { Component, input } from '@angular/core';
 
 @Component({
 	selector: 'loading-spinner',
-	templateUrl: 'loading-spinner.component.html',
-	styleUrls: ['loading-spinner.component.scss'],
+	templateUrl: './loading-spinner.component.html',
+	styleUrls: ['./loading-spinner.component.scss'],
 	standalone: true
 })
 export class LoadingSpinnerComponent {

src/app/common/modal/modal/modal.component.html

@@ -7,7 +7,7 @@ <h2 class="modal-title">
 </section>
 
 <section class="modal-body">
-	<ng-content></ng-content>
+	<ng-content />
 </section>
 
 <section class="modal-footer">

src/app/common/notification/notification.component.html

@@ -4,7 +4,7 @@
 	</div>
 	@if (showActions() && actionTemplate()) {
 		<div class="table-actions d-flex">
-			<ng-container *ngTemplateOutlet="actionTemplate() ?? null"></ng-container>
+			<ng-container *ngTemplateOutlet="actionTemplate() ?? null" />
 		</div>
 	}
 </div>

src/app/common/notification/notification.component.ts

@@ -10,8 +10,8 @@ import {
 
 @Component({
 	selector: 'notification',
-	templateUrl: 'notification.component.html',
-	styleUrls: ['notification.component.scss'],
+	templateUrl: './notification.component.html',
+	styleUrls: ['./notification.component.scss'],
 	standalone: true,
 	imports: [NgTemplateOutlet],
 	changeDetection: ChangeDetectionStrategy.OnPush

src/app/common/search-input/search-input.component.html

@@ -7,11 +7,12 @@
 		(input)="onInput()"
 		(keyup)="onKeyup()"
 	/>
-	@if (search().length === 0) {
-		<span class="icon fa-solid fa-search"></span>
-	} @else {
-		<span class="icon fa-solid fa-times" (click)="clearSearch($event)"></span>
-	}
+	<button class="btn shadow-none" type="button" (click)="clearSearch($event)">
+		<span
+			class="fa-solid fa-fw"
+			[ngClass]="search().length === 0 ? 'fa-search' : 'fa-times'"
+		></span>
+	</button>
 </div>
 @if (!disableMinCountMessage() && showMinCountMessage()) {
 	<div class="text-body-secondary pt-2" [@minCount]>

src/app/common/search-input/search-input.component.scss

@@ -1,12 +1,8 @@
 .search-input-container {
 	width: 350px;
-}
 
-.icon {
-	position: relative;
-	display: flex;
-	align-items: center;
-	margin-left: -20px;
-	float: right;
-	z-index: 500;
+	button {
+		margin-left: -40px;
+		border: 0;
+	}
 }

src/app/common/search-input/search-input.component.spec.ts

@@ -151,15 +151,15 @@ describe('SearchInputComponent', () => {
 		inputElement.nativeElement.dispatchEvent(new Event('input'));
 		fixture.detectChanges();
 
-		expect(fixture.debugElement.queryAll(By.css('.icon.fa-times')).length).toBe(1);
+		expect(fixture.debugElement.queryAll(By.css('.fa-times')).length).toBe(1);
 	});
 
 	it('should not show clear-search options if search input length === 0', () => {
 		inputElement.nativeElement.value = '';
 		inputElement.nativeElement.dispatchEvent(new Event('input'));
 		fixture.detectChanges();
 
-		expect(fixture.debugElement.queryAll(By.css('span.icon.fa-times')).length).toBe(0);
+		expect(fixture.debugElement.queryAll(By.css('.fa-times')).length).toBe(0);
 	});
 
 	it('should clear the search when the clearSearch span is clicked', waitForAsync(() => {
@@ -170,9 +170,7 @@ describe('SearchInputComponent', () => {
 		fixture.detectChanges();
 
 		// click the clear-search option
-		(
-			fixture.debugElement.query(By.css('span.icon.fa-times')).nativeElement as HTMLElement
-		).click();
+		(fixture.debugElement.query(By.css('.fa-times')).nativeElement as HTMLElement).click();
 
 		fixture.detectChanges();
 

src/app/common/search-input/search-input.component.ts

@@ -1,10 +1,12 @@
 import { animate, style, transition, trigger } from '@angular/animations';
+import { NgClass } from '@angular/common';
 import {
 	ChangeDetectionStrategy,
 	Component,
 	booleanAttribute,
 	input,
 	model,
+	numberAttribute,
 	output,
 	signal
 } from '@angular/core';
@@ -31,7 +33,7 @@ import { debounceTime } from 'rxjs/operators';
 		])
 	],
 	standalone: true,
-	imports: [FormsModule],
+	imports: [FormsModule, NgClass],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SearchInputComponent {
@@ -48,7 +50,7 @@ export class SearchInputComponent {
 	 * Specifies a minimum character count required to search.
 	 * In the event the number of characters is between 0 and the minimum, a warning message is shown beneath the search bar
 	 */
-	readonly minSearchCharacterCount = input(0);
+	readonly minSearchCharacterCount = input(0, { transform: numberAttribute });
 
 	/**
 	 * When set to true, the minimum search character
@@ -90,10 +92,12 @@ export class SearchInputComponent {
 	}
 
 	clearSearch(event?: MouseEvent) {
-		this.search.set('');
-		this.applySearch.emit(this.search());
-		if (event) {
-			event.stopPropagation();
+		if (this.search().length > 0) {
+			this.search.set('');
+			this.applySearch.emit(this.search());
+			if (event) {
+				event.stopPropagation();
+			}
 		}
 	}
 }

src/app/common/system-alert/system-alert.component.ts

@@ -5,8 +5,8 @@ import { SystemAlertService } from './system-alert.service';
 
 @Component({
 	selector: 'system-alert',
-	templateUrl: 'system-alert.component.html',
-	styleUrls: ['system-alert.component.scss'],
+	templateUrl: './system-alert.component.html',
+	styleUrls: ['./system-alert.component.scss'],
 	animations: [
 		trigger('animateAddRemove', [
 			transition(':enter', [

src/app/common/table/actions-menu-column/actions-menu-column.component.scss

@@ -1,8 +1,7 @@
-.cdk-column-actionsMenu {
+.cdk-cell {
 	width: 50px;
 
 	button.dropdown-toggle {
-		display: block;
 		border: 0;
 
 		&:hover {

src/app/common/table/columns/ago-date/ago-date-column.component.html

@@ -8,8 +8,7 @@
 			[ngTemplateOutletContext]="{
 				header: header()
 			}"
-		>
-		</ng-template>
+		/>
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		<div class="text-nowrap" container="body" tooltip="{{ obj[name] | utcDate: format() }}">

src/app/common/table/columns/asy-abstract-column.component.ts

@@ -10,7 +10,7 @@ import {
 	input
 } from '@angular/core';
 
-@Directive()
+@Directive({ standalone: true })
 export abstract class AsyAbstractColumnComponent<T> implements OnDestroy, OnInit {
 	/** Column name that should be used to reference this column. */
 	@Input()

src/app/common/table/columns/asy-abstract-value-column.component.ts

@@ -3,7 +3,7 @@ import { Directive, TemplateRef, booleanAttribute, contentChild, input } from '@
 import { AsyAbstractColumnComponent } from './asy-abstract-column.component';
 import { HeaderTemplateDirective } from './header-template.directive';
 
-@Directive()
+@Directive({ standalone: true })
 export abstract class AsyAbstractValueColumnComponent<T> extends AsyAbstractColumnComponent<T> {
 	readonly header = input<string>();
 	readonly sortable = input(true, { transform: booleanAttribute });

src/app/common/table/columns/date/date-column.component.html

@@ -8,8 +8,7 @@
 			[ngTemplateOutletContext]="{
 				header: header()
 			}"
-		>
-		</ng-template>
+		/>
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		{{ obj[name] | utcDate: format() }}

src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html

@@ -8,8 +8,7 @@
 			[ngTemplateOutletContext]="{
 				header: header()
 			}"
-		>
-		</ng-template>
+		/>
 	</th>
 	<td
 		class=""
@@ -32,15 +31,14 @@
 									item: item,
 									index: item.index
 								}"
-							>
-							</ng-template>
+							/>
 						</div>
 					}
 				</div>
 			}
 			@if (item[name]?.length > 1) {
 				<div class="ps-auto">
-					<button class="btn btn-sm btn-link py-0" (click)="toggle(item)">
+					<button class="btn btn-sm btn-link py-0" type="button" (click)="toggle(item)">
 						<span class="fa-solid fa-lg fa-angle-down"></span>
 					</button>
 				</div>

src/app/common/table/columns/expander/asy-expander-column.component.html

@@ -2,12 +2,12 @@
 	<th cdk-header-cell style="width: 42px" *cdkHeaderCellDef></th>
 	<td cdk-cell *cdkCellDef="let item; let index = index">
 		@if (isExpandable()(index, item)) {
-			<div style="cursor: pointer" (click)="toggle(index, item)">
+			<button class="btn shadow-none p-0" type="button" (click)="toggle(index, item)">
 				<span
 					class="fa-solid fa-lg fa-angle-down"
 					[class.fa-flip-vertical]="isExpanded(index, item)"
 				></span>
-			</div>
+			</button>
 		}
 	</td>
 </ng-container>