feat: implement confirm dialog for project deletion and item removal in dynamic forms; enhance form field accessibility

src/app/shared/dynamic-form/dynamic-form.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, inject } from '@angular/core';
 import { ReactiveFormsModule, FormGroup, FormControl, Validators, FormArray, AbstractControl } from '@angular/forms';
 import { DynamicFormConfig } from './dynamic-form-config';
 import { DynamicField } from './dynamic-field';
@@ -9,7 +9,9 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { provideNativeDateAdapter } from '@angular/material/core';
+import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog';
 
 @Component({
   selector: "app-dynamic-form",
@@ -17,7 +19,7 @@ import { provideNativeDateAdapter } from '@angular/material/core';
   standalone: true,
   styleUrls: ['./dynamic-form.scss'],
   providers: [provideNativeDateAdapter()],
-  imports: [ReactiveFormsModule, CommonModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule, MatIconModule, MatDatepickerModule]
+  imports: [ReactiveFormsModule, CommonModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule, MatIconModule, MatDatepickerModule, MatDialogModule]
 })
 export class DynamicFormComponent implements OnInit {
   @Input() config!: DynamicFormConfig;
@@ -25,6 +27,8 @@ export class DynamicFormComponent implements OnInit {
 
   @Output() formBuilt = new EventEmitter<FormGroup>();
 
+  private dialog = inject(MatDialog);
+
   form!: FormGroup;
 
   ngOnInit() {
@@ -71,7 +75,21 @@ addArrayItem(field: DynamicField) {
 
 removeArrayItem(field: DynamicField, index: number) {
   const array = this.form.get(field.name) as FormArray;
-  array.removeAt(index);
+
+  this.dialog.open(ConfirmDialogComponent, {
+    data: {
+      title: 'Remove Item',
+      message: `Are you sure you want to remove this ${field.label?.toLowerCase() ?? 'item'}?`,
+      confirmLabel: 'Remove',
+      confirmColor: 'warn'
+    },
+    panelClass: 'dark-popup-panel',
+    width: '400px'
+  }).afterClosed().subscribe((confirmed: boolean) => {
+    if (confirmed) {
+      array.removeAt(index);
+    }
+  });
 }
 
   getArrayControls(name: string): AbstractControl[] {