refactor: Replace ngx-bootstrap modals with cdk dialogs (#332)

* Initial steps towards migrating away from the ngx-bootstrap library in favor of using cdk.  Cdk components have better a11y support and are style agnostic.  We can still apply bootstrap styles to them, but gives us the options to move away from bootstrap in the future.
* Still using bootstrap styling for visual consistency.
* Replaced all modal usages in starter with dialog.
* Existing ngx-bootstrap modal components/services still available to ease migrations.  Will remove in the future.

src/app/app.component.spec.ts

@@ -1,8 +1,8 @@
+import { DialogModule } from '@angular/cdk/dialog';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 
-import { ModalModule } from 'ngx-bootstrap/modal';
 import { of } from 'rxjs';
 
 import { AppComponent } from './app.component';
@@ -16,7 +16,7 @@ describe('AppComponent', () => {
 		configServiceSpy.getConfig.and.returnValue(of({}));
 
 		TestBed.configureTestingModule({
-			imports: [ModalModule.forRoot(), AppComponent],
+			imports: [DialogModule, AppComponent],
 			providers: [
 				{ provide: ConfigService, useValue: configServiceSpy },
 				provideHttpClient(),

src/app/app.config.ts

@@ -13,6 +13,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 
+import { providerCdkDialog } from './common/dialog/provider';
 import { authInterceptor } from './core/auth/auth.interceptor';
 import { euaInterceptor } from './core/auth/eua.interceptor';
 import { signinInterceptor } from './core/auth/signin.interceptor';
@@ -44,6 +45,7 @@ export const appConfig: ApplicationConfig = {
 			// Ensures any legacy class based interceptors are used.
 			withInterceptorsFromDi()
 		),
+		providerCdkDialog(),
 		provideRouter([], withHashLocation()),
 		provideCoreRoutes(),
 		provideExampleRoutes(),

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

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

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

@@ -0,0 +1,16 @@
+import { CdkDialogContainer, DialogConfig } from '@angular/cdk/dialog';
+import { PortalModule } from '@angular/cdk/portal';
+import { Component } from '@angular/core';
+
+/**
+ * Custom CDK Dialog Container to properly apply bootstrap modal styles
+ */
+@Component({
+	selector: 'bs-dialog-container',
+	standalone: true,
+	imports: [PortalModule],
+	templateUrl: './bs-dialog-container.component.html'
+})
+export class BsDialogContainerComponent<
+	C extends DialogConfig = DialogConfig
+> extends CdkDialogContainer<C> {}

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

@@ -0,0 +1,35 @@
+<asy-modal
+	[title]="data.title"
+	[cancelText]="data.cancelText"
+	[disableOk]="!modalForm.form.valid"
+	[okText]="data.okText"
+	(cancel)="cancel()"
+	(ok)="ok()"
+>
+	<p *ngIf="data.message" [innerHTML]="data.message"></p>
+	<form id="modalForm" #modalForm="ngForm">
+		<div class="form-group" *ngFor="let input of data.inputs; first as isFirst">
+			<label [class.form-required]="input.required">{{ input.label }}</label>
+
+			<textarea
+				class="form-control text-area"
+				[name]="input.key"
+				placeholder="Enter {{ input.label }}..."
+				*ngIf="input.type === 'textarea'"
+				[(ngModel)]="formData[input.key]"
+				[required]="input.required"
+			>
+			</textarea>
+
+			<input
+				class="form-control"
+				[name]="input.key"
+				[type]="input.type"
+				placeholder="Enter {{ input.label | lowercase }}..."
+				*ngIf="input.type !== 'textarea'"
+				[(ngModel)]="formData[input.key]"
+				[required]="input.required"
+			/>
+		</div>
+	</form>
+</asy-modal>

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

@@ -0,0 +1,7 @@
+:host {
+  display: contents;
+}
+
+.text-area {
+  height: 4.5em;
+}

src/app/common/dialog/configurable-dialog/configurable-dialog.component.spec.ts

@@ -0,0 +1,27 @@
+import { DIALOG_DATA, DialogModule, DialogRef } from '@angular/cdk/dialog';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigurableDialogComponent } from './configurable-dialog.component';
+
+describe('ConfigurableDialogComponent', () => {
+	let component: ConfigurableDialogComponent;
+	let fixture: ComponentFixture<ConfigurableDialogComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [ConfigurableDialogComponent, DialogModule],
+			providers: [
+				{ provide: DIALOG_DATA, useValue: {} },
+				{ provide: DialogRef, useValue: {} }
+			]
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(ConfigurableDialogComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,47 @@
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ModalComponent } from '../../modal/modal/modal.component';
+import { DialogAction, DialogReturn } from '../dialog.modal';
+
+export type DialogInput = {
+	type: 'textarea' | 'text';
+	label: string;
+	key: string;
+	required: boolean;
+};
+
+export class ConfigurableDialogData {
+	title: string;
+	okText: string;
+	cancelText?: string;
+	message: string;
+	inputs?: DialogInput[];
+}
+
+@Component({
+	standalone: true,
+	imports: [CommonModule, FormsModule, ReactiveFormsModule, ModalComponent],
+	templateUrl: './configurable-dialog.component.html',
+	styleUrls: ['./configurable-dialog.component.scss']
+})
+export class ConfigurableDialogComponent {
+	data: ConfigurableDialogData = inject(DIALOG_DATA);
+	dialogRef = inject(DialogRef);
+
+	formData: any = {};
+
+	cancel() {
+		this.dialogRef.close({ action: DialogAction.CANCEL });
+	}
+
+	ok() {
+		const event: DialogReturn<any> = { action: DialogAction.OK };
+		if (this.data.inputs) {
+			event.data = this.formData;
+		}
+		this.dialogRef.close(event);
+	}
+}

src/app/common/dialog/dialog.modal.ts

@@ -0,0 +1,9 @@
+export enum DialogAction {
+	OK,
+	CANCEL
+}
+
+export class DialogReturn<T> {
+	action: DialogAction;
+	data?: T;
+}

src/app/common/dialog/dialog.service.ts

@@ -0,0 +1,91 @@
+import { Dialog, DialogConfig, DialogRef } from '@angular/cdk/dialog';
+import { ComponentType } from '@angular/cdk/overlay';
+import { Injectable, inject } from '@angular/core';
+
+import {
+	ConfigurableDialogComponent,
+	ConfigurableDialogData
+} from './configurable-dialog/configurable-dialog.component';
+import { DialogReturn } from './dialog.modal';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class DialogService {
+	dialog = inject(Dialog);
+
+	alert(
+		title: string,
+		message: string,
+		okText = 'OK',
+		modalOptions?: DialogConfig
+	): DialogRef<DialogReturn<void>> {
+		return this.show(
+			{
+				title,
+				message,
+				okText
+			},
+			modalOptions
+		);
+	}
+
+	confirm(
+		title: string,
+		message: string,
+		okText = 'OK',
+		cancelText = 'Cancel',
+		modalOptions?: DialogConfig
+	): DialogRef<DialogReturn<void>> {
+		return this.show(
+			{
+				title,
+				message,
+				okText,
+				cancelText
+			},
+			modalOptions
+		);
+	}
+
+	prompt(
+		title: string,
+		message: string,
+		inputLabel: string,
+		okText = 'OK',
+		cancelText = 'Cancel',
+		modalOptions?: DialogConfig
+	): DialogRef<DialogReturn<{ prompt: string }>> {
+		return this.show(
+			{
+				title,
+				message,
+				okText,
+				cancelText,
+				inputs: [{ type: 'text', label: inputLabel, key: 'prompt', required: true }]
+			},
+			modalOptions
+		);
+	}
+
+	/**
+	 * The show method will display a modal that can include a message and a form
+	 */
+	show<R = unknown>(contentConfig: ConfigurableDialogData, modalOptions: DialogConfig = {}) {
+		const config = {
+			disableClose: true,
+			data: contentConfig,
+			...DialogConfig
+		};
+
+		return this.dialog.open<R>(ConfigurableDialogComponent, config);
+	}
+
+	// Pass through to Dialog.open.  This allows for standardizing on using DialogService everywhere.
+	open<R = unknown, D = unknown, C = unknown>(
+		component: ComponentType<C>,
+		config?: DialogConfig<D, DialogRef<R, C>>
+	): DialogRef<R, C> {
+		return this.dialog.open(component, config);
+	}
+}

src/app/common/dialog/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/app/common/dialog/provider.ts

@@ -0,0 +1,20 @@
+import { DEFAULT_DIALOG_CONFIG, DialogModule } from '@angular/cdk/dialog';
+import { importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
+
+import { BsDialogContainerComponent } from './bs-dialog-container/bs-dialog-container.component';
+
+export function providerCdkDialog() {
+	return makeEnvironmentProviders([
+		importProvidersFrom(DialogModule),
+		{
+			provide: DEFAULT_DIALOG_CONFIG,
+			useValue: {
+				closeOnNavigation: true,
+				container: BsDialogContainerComponent,
+				panelClass: 'modal',
+				autoFocus: true,
+				hasBackdrop: true
+			}
+		}
+	]);
+}

src/app/common/dialog/public-api.ts

@@ -0,0 +1,4 @@
+export * from './dialog.modal';
+export * from './dialog.service';
+export * from './bs-dialog-container/bs-dialog-container.component';
+export * from './configurable-dialog/configurable-dialog.component';

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

@@ -1,6 +1,5 @@
 <asy-modal
 	[title]="title"
-	[autoCaptureFocus]="inputs && inputs.length > 0"
 	[cancelText]="cancelText"
 	[disableOk]="!modalForm.form.valid"
 	[okText]="okText"
@@ -18,7 +17,6 @@
 				placeholder="Enter {{ input.label }}..."
 				*ngIf="input.type === 'textarea'"
 				[(ngModel)]="formData[input.key]"
-				[attr.cdkFocusInitial]="isFirst"
 				[required]="input.required"
 			>
 			</textarea>
@@ -30,7 +28,6 @@
 				placeholder="Enter {{ input.label | lowercase }}..."
 				*ngIf="input.type !== 'textarea'"
 				[(ngModel)]="formData[input.key]"
-				[attr.cdkFocusInitial]="isFirst"
 				[required]="input.required"
 			/>
 		</div>

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

@@ -1,6 +1,5 @@
 <asy-modal
 	[title]="title"
-	[autoCaptureFocus]="isCdkFocusInitial"
 	[cancelText]="cancelText"
 	[disableOk]="isOkDisabled"
 	[okText]="okText"

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

@@ -1,24 +1,22 @@
-<div cdkTrapFocus [cdkTrapFocusAutoCapture]="autoCaptureFocus">
-	<section class="modal-header">
-		<h2 class="modal-title">
-			{{ title }}
-		</h2>
+<section class="modal-header">
+	<h2 class="modal-title">
+		{{ title }}
+	</h2>
 
-		<button class="close" type="button" aria-label="Cancel" (click)="cancel.emit()">
-			<span class="fa-solid fa-remove" aria-hidden="true"></span>
-		</button>
-	</section>
+	<button class="close" type="button" aria-label="Cancel" (click)="cancel.emit()">
+		<span class="fa-solid fa-remove" aria-hidden="true"></span>
+	</button>
+</section>
 
-	<section class="modal-body">
-		<ng-content></ng-content>
-	</section>
+<section class="modal-body">
+	<ng-content></ng-content>
+</section>
 
-	<section class="modal-footer">
-		<button class="btn btn-outline-secondary mr-2" *ngIf="cancelText" (click)="cancel.emit()">
-			{{ cancelText }}
-		</button>
-		<button class="btn btn-primary" [disabled]="disableOk" (click)="ok.emit()">
-			{{ okText }}
-		</button>
-	</section>
-</div>
+<section class="modal-footer">
+	<button class="btn btn-outline-secondary mr-2" *ngIf="cancelText" (click)="cancel.emit()">
+		{{ cancelText }}
+	</button>
+	<button class="btn btn-primary" [disabled]="disableOk" (click)="ok.emit()">
+		{{ okText }}
+	</button>
+</section>

src/app/common/modal/modal/modal.component.scss

@@ -1,4 +0,0 @@
-:host,
-div[cdkTrapFocus] {
-	display: contents;
-}