RED-3800: update dialog directive

src/lib/dialog/index.ts

@@ -2,3 +2,5 @@ export * from './base-dialog.component';
 export * from './confirmation-dialog.service';
 export * from './confirmation-dialog/confirmation-dialog.component';
 export * from './dialog.service';
+export * from './iqser-dialog-component.directive';
+export * from './iqser-dialog.service';

src/lib/dialog/iqser-dialog-component.directive.ts

@@ -1,6 +1,8 @@
 import { Directive, HostListener, inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { hasFormChanged, IqserEventTarget } from '../utils';
+import { FormGroup } from '@angular/forms';
 
 const DATA_TYPE_SYMBOL = Symbol.for('DATA_TYPE');
 const RETURN_TYPE_SYMBOL = Symbol.for('RETURN_TYPE');
@@ -8,6 +10,8 @@ const RETURN_TYPE_SYMBOL = Symbol.for('RETURN_TYPE');
 export type DATA_TYPE = typeof DATA_TYPE_SYMBOL;
 export type RETURN_TYPE = typeof RETURN_TYPE_SYMBOL;
 
+const TARGET_NODE = 'mat-dialog-container';
+
 @Directive()
 export abstract class IqserDialogComponent<ComponentType, DataType, ReturnType> {
     readonly [DATA_TYPE_SYMBOL]!: DataType;
@@ -16,6 +20,8 @@ export abstract class IqserDialogComponent<ComponentType, DataType, ReturnType>
     readonly dialogRef = inject(MatDialogRef<ComponentType, ReturnType>);
     readonly data = inject<DataType>(MAT_DIALOG_DATA);
     readonly dialog = inject(MatDialog);
+    readonly form?: FormGroup;
+    initialFormValue: Record<string, unknown> = {};
 
     constructor() {
         this.dialogRef
@@ -25,6 +31,18 @@ export abstract class IqserDialogComponent<ComponentType, DataType, ReturnType>
             .subscribe(() => this.close());
     }
 
+    get valid(): boolean {
+        return !this.form || this.form.valid;
+    }
+
+    get changed(): boolean {
+        return !this.form || hasFormChanged(this.form, this.initialFormValue);
+    }
+
+    get disabled(): boolean {
+        return !this.valid || !this.changed;
+    }
+
     @HostListener('window:keydown.Escape', ['$event'])
     onEscape(): void {
         if (this.dialog.openDialogs.length === 1) {
@@ -32,6 +50,19 @@ export abstract class IqserDialogComponent<ComponentType, DataType, ReturnType>
         }
     }
 
+    @HostListener('window:keydown.Enter', ['$event'])
+    onEnter(event: KeyboardEvent): void {
+        event?.stopImmediatePropagation();
+        const node = (event.target as IqserEventTarget).localName?.trim()?.toLowerCase();
+        if (this.onEnterValidator(event) && node === TARGET_NODE) {
+            this.close();
+        }
+    }
+
+    onEnterValidator(event: KeyboardEvent) {
+        return this.valid && !this.disabled && this.changed;
+    }
+
     close(dialogResult?: ReturnType) {
         this.dialogRef.close(dialogResult);
     }

src/lib/utils/functions.ts

@@ -5,7 +5,7 @@ import dayjs, { type Dayjs } from 'dayjs';
 import { inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-export function capitalize(value: string | String): string {
+export function capitalize(value: string | string): string {
     if (!value) {
         return '';
     }
@@ -89,7 +89,7 @@ export function trackByFactory<T extends ITrackable<PrimaryKey>, PrimaryKey exte
     return (_index: number, item: T): Id => item.id;
 }
 
-export function hasFormChanged(form: UntypedFormGroup, initialFormValue: Record<string, string | number | boolean>): boolean {
+export function hasFormChanged(form: UntypedFormGroup, initialFormValue: Record<string, unknown>): boolean {
     if (!form || !initialFormValue) {
         return false;
     }