feat(ngx-inform): Add modal setup

apps/layout-test/src/app/app.component.html

@@ -13,4 +13,7 @@
 
 <hr />
 
+<button (click)="sayHello()">Say hello!</button>
+<button (click)="confirm()">Confirm!</button>
+
 <router-outlet/>

apps/layout-test/src/app/app.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
 
 import { RouterModule } from '@angular/router';
+import { tap } from 'rxjs';
+import { ModalComponent } from '../modal/modal.component';
 import { NgxMediaQueryService } from '@ngx/utils';
+import { NgxModalService } from '@ngx/inform';
 
 @Component({
 	selector: 'app-root',
@@ -10,12 +13,42 @@ import { NgxMediaQueryService } from '@ngx/utils';
 	imports: [RouterModule],
 })
 export class AppComponent {
-	constructor(private readonly mediaService: NgxMediaQueryService) {
+	constructor(
+		private readonly mediaService: NgxMediaQueryService,
+		private readonly modalService: NgxModalService
+	) {
 		// Wouter: To see these in action, navigate to '/queries' in the browser
 		this.mediaService.registerMediaQueries(
 			['small', '(max-width: 500px)'],
 			['medium', '(max-width: 600px)'],
 			['large', '(max-width: 700px)']
 		);
 	}
+
+	public sayHello(): void {
+		this.modalService
+			.open({
+				component: ModalComponent,
+				label: 'Modal',
+				role: 'dialog',
+			})
+			.pipe(
+				tap((action) => {
+					if (action === 'Test') {
+						console.log('Hello!');
+					}
+				})
+			)
+			.subscribe();
+	}
+
+	confirm(): void {
+		this.modalService
+			.open({
+				type: 'confirm',
+				describedById: 'id',
+				labelledById: 'hello',
+			})
+			.subscribe();
+	}
 }

apps/layout-test/src/app/app.config.ts

@@ -8,9 +8,10 @@ import {
 import { TourItemComponent } from '../tour/tour.component';
 import { routes } from '../routes';
 import { TooltipComponent } from '../tooltip/tooltip.component';
+import { ConfirmModalComponent } from '../modal/confirm.component';
 import { provideNgxDisplayContentConfiguration } from '@ngx/layout';
 import { provideNgxTourConfiguration } from '@ngx/tour';
-import { provideNgxTooltipConfiguration } from '@ngx/inform';
+import { provideNgxModalConfiguration, provideNgxTooltipConfiguration } from '@ngx/inform';
 
 export const appConfig: ApplicationConfig = {
 	providers: [
@@ -25,6 +26,14 @@ export const appConfig: ApplicationConfig = {
 		}),
 		provideNgxTourConfiguration(TourItemComponent),
 		provideNgxTooltipConfiguration({ component: TooltipComponent }),
+		provideNgxModalConfiguration({
+			modals: {
+				confirm: {
+					component: ConfirmModalComponent,
+					role: 'alertdialog',
+				},
+			},
+		}),
 		provideRouter(routes),
 	],
 };

apps/layout-test/src/modal/confirm.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { NgxModalAbstractComponent } from '@ngx/inform';
+
+@Component({
+	selector: 'confirm-modal',
+	template: `
+		Confirm this please
+		<button (click)="action.emit('Confirm')">Confirm</button>
+		<button (click)="close.emit()">Close</button>
+	`,
+	styleUrl: './modal.component.scss',
+	standalone: true,
+})
+export class ConfirmModalComponent extends NgxModalAbstractComponent<'Confirm'> {}

apps/layout-test/src/modal/modal.component.scss

@@ -0,0 +1,6 @@
+:host {
+	display: block;
+	background: white;
+	border: 1px solid black;
+	padding: 15px;
+}

apps/layout-test/src/modal/modal.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { NgxModalAbstractComponent } from '@ngx/inform';
+
+@Component({
+	selector: 'test-modal',
+	template: `
+		Hello world!
+		<button (click)="action.emit('Test')">Hello there!</button>
+		<button (click)="close.emit()">Close</button>
+	`,
+	styleUrl: './modal.component.scss',
+	standalone: true,
+})
+export class ModalComponent extends NgxModalAbstractComponent<'Test'> {}

libs/inform/README.md

@@ -21,9 +21,11 @@ For more information about the build process, authors, contributions and issues,
 
 ## Concept
 
-`ngx-inform` is a package to help facilitate common user information use-cases such as tooltips, toasts and snackbars.
+`ngx-inform` is a package to help facilitate common user information use-cases such as tooltips, toasts and snackbars. 
 
-Currently the package provides a `ngxTooltip` directive which can be used to attach a customizable ARIA compliant tooltip to any component.
+At its core, `ngx-inform` is build to be WCAG and ARIA compliant, and will throw errors whenever the necessary setup has not been provided to ensure said compliancy.
+
+Currently the package provides a `ngxTooltip` directive which can be used to attach a customizable ARIA compliant tooltip to any component and the `ngxModalService` which allows for both custom and predefined global modals to be used throughout the application.
 
 ## Directives
 
@@ -84,4 +86,106 @@ On top of these two inputs, we have two additional inputs, being `ngxTooltipComp
 <h1 ngxTooltip="This is a tooltip!" ngxTooltipId="title_1" ngxTooltipPosition="right" [ngxTooltipComponent]="MyCustomTooltipComponent">Title 1</h1>
 ```
 
-When you wish to disable a tooltip and thus prevent it from being shown, you can use the `ngxTooltipDisabled` property. By default, this property is false.
+When you wish to disable a tooltip and thus prevent it from being shown, you can use the `ngxTooltipDisabled` property. By default, this property is `false`.
+
+## Services
+
+### NgxModalService
+
+The `NgxModalService` provides a WCAG/ARIA compliant approach to the Angular CDK `Dialog` service. It is important to understand that, unlike the Dialog service of the CDK, `ngx-inform` **will enforce WCAG/ARIA compliance**. Because of that, certain configuration of the CDK Dialog becomes mandatory and other options that would result in incompliance have been disabled.
+
+### Setup
+
+You can use the `NgxModalService` without any prior setup, but the `ngx-inform` package does provide the ability to provide a global configuration that can be applied for all modals. On top of that, you can provide default modals with your specific configuration.
+
+``` ts
+		provideNgxModalConfiguration({
+            closeOnNavigation: true,
+            autoClose: true
+			modals: {
+				confirm: {
+					component: ConfirmModalComponent,
+					role: 'alertdialog',
+                    panelClass: 'panel-confirm',
+				},
+			},
+		}),
+```
+
+Using the above configuration, we can set several properties that will be applied to the modals globally. These properties are:
+| Property                     |                                                                                                              |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| closeOnNavigation                 | Whether the modal closes on navigation. By default, this is `true` |
+| direction                 | The reading direction of the modal. |
+| hasBackdrop                | Whether or not we wish to set a backdrop. By default, this is `true`. |
+| panelClass                | A class set to the `overlay` element. By default, this is an empty array. |
+| autoClose                 | Whether the modal automatically closes after the initial interaction emitted by the `action` output. By default, this is `true`. |
+
+On top of that, by passing a `modals` record, we can define a set preset modals we can use throughout the entire application. We can setup default modals for confirmation, navigating away from a route, etc. Next to overwrites of the global properties above, we can also provide the following properties:
+
+| Property                     |                                                                                                              |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| role                 | The ARIA role of the modal, either `dialog` or `alertDialog`                                                                            |
+| component                 | An implementation of the `NgxModalAbstractComponent`                                                                             |
+| data               | Any data we wish to provide to the component.                                                                              |
+
+### Implementation
+
+The `NgxModalService` allows for two ways of opening a modal. Either by opening a predefined modal we set in the configuration, or a custom modal by passing a new modal component.
+
+To make the modals ARIA compliant either a `label` or a `labelledById` must be provided. If the role of a modal was set to `alertdialog`, the `describedById` property is also required.
+
+When opening a modal we can overwrite all the globally and modal-specific configuration using the same properties as mentioned earlier. On top of that, we can set several other properties. These properties are:
+
+| Property                     |                                                                                                              |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| injector                | Injector used for the instantiation of the component to be attached. If provided, takes precedence over the injector indirectly provided by ViewContainerRef. |
+| viewContainerRef                | Where the attached component should live in Angular's logical component tree. This affects what is available for injection and the change detection order for the component instantiated inside of the dialog. This does not affect where the dialog content will be rendered. |
+| restoreFocus                | Whether the dialog should restore focus to the previously-focused element upon closing. By default, this is `true`|
+| autoFocus                | Where the dialog should focus on open. By default, this is `true` |
+
+#### Predefined modal
+
+If we set a predefined modal, we can now call said modal using the `open` method on `NgxModalService`.
+
+```ts
+		this.modalService
+			.open<'Confirm' | 'Deny'>({
+				type: 'confirm',
+				describedById: 'confirm-button',
+				labelledById: 'confirm-label',
+                data: {
+                    title: 'Please confirm your actions!'
+                }
+			})
+            .pipe(
+                tap(action => {
+                    if(action === 'Confirm') {
+                        // Perform confirm logic
+                    }
+
+                    // Perform non-confirm logic
+                })
+            )
+			.subscribe();
+```
+#### Custom modal
+
+We can always create a custom modal for feature-specific use-cases. We do this by providing a component.
+
+``` ts
+		this.modalService
+			.open<'Test'>({
+				component: ModalComponent,
+				label: 'Modal',
+				role: 'dialog',
+			})
+			.pipe(
+				tap((action) => {
+					if (action === 'Test') {
+						console.log('Hello!');
+					}
+				})
+			)
+			.subscribe();
+```

libs/inform/package.json

@@ -7,9 +7,13 @@
 		"angular2",
 		"inform",
 		"ARIA",
+    "WCAG",
 		"tooltip",
 		"tip",
-		"accessibility"
+		"accessibility",
+    "modal",
+    "dialog",
+    "alertdialog"
 	],
 	"homepage": "https://github.com/studiohyperdrive/ngx-tools/tree/master/libs/inform",
 	"license": "MIT",

libs/inform/src/lib/abstracts/index.ts

@@ -1 +1,2 @@
 export * from './tooltip/tooltip.abstract.component';
+export * from './modal/modal.abstract.component';

libs/inform/src/lib/abstracts/modal/modal.abstract.component.ts

@@ -0,0 +1,29 @@
+import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+/**
+ * An abstract for the NgxModalService
+ */
+@Directive()
+export class NgxModalAbstractComponent<ActionType extends string = string, DataType = any> {
+	/**
+	 * Remove the modal on escape pressed
+	 */
+	@HostListener('document:keydown.escape') private onEscape() {
+		this.close.emit();
+	}
+
+	/**
+	 * Optional data that can be passed to the modal
+	 */
+	@Input() public data: DataType;
+
+	/**
+	 * An emitter that will emit an action we can later respond to
+	 */
+	@Output() public action: EventEmitter<ActionType> = new EventEmitter<ActionType>();
+
+	/**
+	 * An emitter that will emit if the modal is closed
+	 */
+	@Output() public close: EventEmitter<void> = new EventEmitter<void>();
+}

libs/inform/src/lib/abstracts/tooltip/tooltip.abstract.component.ts

@@ -3,6 +3,9 @@ import { Directive, HostBinding, HostListener, Input } from '@angular/core';
 import { NgxTooltipPosition, NgxTooltipPositionClass } from '../../types';
 import { NgxTooltipService } from '../../services';
 
+/**
+ * An abstract for the NgxTooltipDirective
+ */
 @Directive()
 export abstract class NgxTooltipAbstractComponent {
 	/**

libs/inform/src/lib/index.ts

@@ -3,3 +3,4 @@ export * from './directives';
 export * from './providers';
 export * from './abstracts';
 export * from './tokens';
+export { NgxModalService } from './services';

libs/inform/src/lib/providers/index.ts

@@ -1 +1,2 @@
 export * from './tooltip/tooltip-configuration.provider';
+export * from './modal/modal-configuration.provider';

libs/inform/src/lib/providers/modal/modal-configuration.provider.ts

@@ -0,0 +1,15 @@
+import { Provider } from '@angular/core';
+import { NgxModalConfiguration } from '../../types';
+import { NgxModalConfigurationToken } from '../../tokens';
+
+/**
+ * Provides the configuration for the NgxModalService
+ *
+ * @param configuration - The required configuration
+ */
+export const provideNgxModalConfiguration = (configuration: NgxModalConfiguration): Provider => {
+	return {
+		provide: NgxModalConfigurationToken,
+		useValue: configuration,
+	};
+};

libs/inform/src/lib/services/index.ts

@@ -1 +1,2 @@
-export * from './tooltip-service/tooltip.service';
+export * from './tooltip/tooltip.service';
+export * from './modal/modal.service';