diff --git a/angular.json b/angular.json index 224dedd50..e2abb6785 100644 --- a/angular.json +++ b/angular.json @@ -7,7 +7,8 @@ "projectType": "application", "schematics": { "@schematics/angular:component": { - "style": "scss" + "style": "scss", + "changeDetection": "OnPush" } }, "root": "", diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 58c723913..10c3872ae 100644 --- a/src/app/app.config.ts +++ b/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, ], }; diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html index 07ef9e8a4..2c661682b 100644 --- a/src/app/core/components/root/root.component.html +++ b/src/app/core/components/root/root.component.html @@ -20,3 +20,5 @@ } + + diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts index 23361ce2b..d37fae9eb 100644 --- a/src/app/core/components/root/root.component.ts +++ b/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'], diff --git a/src/app/shared/helpers/default-confirmation-config.helper.ts b/src/app/shared/helpers/default-confirmation-config.helper.ts new file mode 100644 index 000000000..54824b77b --- /dev/null +++ b/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', + }, +}; diff --git a/src/assets/styles/overrides/confirmation-dialog.scss b/src/assets/styles/overrides/confirmation-dialog.scss new file mode 100644 index 000000000..b178b6852 --- /dev/null +++ b/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%; + } + } + } +} diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss index 3eae3f327..79575f030 100644 --- a/src/assets/styles/styles.scss +++ b/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;