Chore/108 - Shared Confirmation dialog

angular.json

@@ -7,7 +7,8 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "scss",
+          "changeDetection": "OnPush"
         }
       },
       "root": "",

src/app/app.config.ts

@@ -7,6 +7,7 @@ import { providePrimeNG } from 'primeng/config';
 import Aura from '@primeng/themes/aura';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
+import { ConfirmationService } from 'primeng/api';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -27,5 +28,6 @@ export const appConfig: ApplicationConfig = {
     }),
     provideAnimations(),
     provideHttpClient(),
+    ConfirmationService,
   ],
 };

src/app/core/components/root/root.component.html

@@ -20,3 +20,5 @@
     </div>
   </div>
 }
+
+<p-confirm-dialog />

src/app/core/components/root/root.component.ts

@@ -7,6 +7,7 @@ import { FooterComponent } from '@core/components/footer/footer.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
 import { IS_PORTRAIT } from '@shared/utils/breakpoints.tokens';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { ConfirmDialog } from 'primeng/confirmdialog';
 
 @Component({
   selector: 'osf-root',
@@ -18,6 +19,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
     MainContentComponent,
     FooterComponent,
     TopnavComponent,
+    ConfirmDialog,
   ],
   templateUrl: './root.component.html',
   styleUrls: ['./root.component.scss'],

src/app/shared/helpers/default-confirmation-config.helper.ts

@@ -0,0 +1,16 @@
+import { Confirmation } from 'primeng/api';
+
+export const defaultConfirmationConfig: Confirmation = {
+  message: 'Are you sure you want to proceed?',
+  header: 'Confirmation',
+  closable: true,
+  closeOnEscape: false,
+  rejectButtonProps: {
+    label: 'Cancel',
+    severity: 'info',
+    outlined: true,
+  },
+  acceptButtonProps: {
+    label: 'Confirm',
+  },
+};

src/assets/styles/overrides/confirmation-dialog.scss

@@ -0,0 +1,36 @@
+.p-confirmdialog {
+  min-height: 212px;
+  width: 450px;
+
+  .p-dialog-header {
+    padding: 24px;
+
+    .p-dialog-title {
+      font-size: 18px;
+      font-weight: 700;
+      text-transform: capitalize;
+    }
+  }
+
+  .p-dialog-content {
+    padding: 0 24px 24px;
+    align-items: start;
+  }
+
+  .p-dialog-footer {
+    padding: 0 24px 24px;
+    justify-content: center;
+
+    p-button {
+      width: 50%;
+
+      .p-confirmdialog-reject-button {
+        width: 100%;
+      }
+
+      .p-confirmdialog-accept-button {
+        width: 100%;
+      }
+    }
+  }
+}

src/assets/styles/styles.scss

@@ -10,6 +10,7 @@
 @use "./overrides/drawer";
 @use "./overrides/card";
 @use "./overrides/carousel";
+@use "./overrides/confirmation-dialog";
 
 @layer base, primeng, reset;