diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts
index fdaab9c..c116fa3 100644
--- a/src/lib/common-ui.module.ts
+++ b/src/lib/common-ui.module.ts
@@ -31,8 +31,9 @@ import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { CapitalizePipe } from './utils/pipes/capitalize.pipe';
import { KeycloakAngularModule } from 'keycloak-angular';
+import { MatCheckboxModule } from '@angular/material/checkbox';
-const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule];
+const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule, MatCheckboxModule];
const modules = [
TranslateModule,
IqserIconsModule,
diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
index 7b2f309..8082b10 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
@@ -3,6 +3,13 @@
{{ config.title }}
+
+
@@ -11,6 +18,15 @@
+
+ 0" class="mt-24 checkboxes-wrapper">
+
+
+ {{ checkbox.label | translate: config.translateParams }}
+
+
+
+
@@ -27,19 +43,18 @@
(click)="confirm(ConfirmOptions.SECOND_CONFIRM)"
*ngIf="config.alternativeConfirmationText"
[disabled]="config.requireInput && confirmationDoesNotMatch()"
- [ngClass]="{'all-caps-label cancel': true}"
+ [ngClass]="{ 'all-caps-label cancel': true }"
color="primary"
mat-flat-button
-
>
{{ config.alternativeConfirmationText }}
-
+
{{ config.discardChangesText }}
-
diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.scss b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.scss
index f65b4b0..21c8eab 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.scss
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.scss
@@ -1,3 +1,8 @@
.warn {
color: var(--iqser-red-1);
}
+
+.checkboxes-wrapper {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
index acfb9cf..efa6357 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostListener, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Inject, TemplateRef } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@@ -16,6 +16,13 @@ export enum ConfirmOptions {
DISCARD_CHANGES = 3,
}
+interface CheckBox {
+ value: boolean;
+ label: string;
+ extraContent?: TemplateRef
;
+ extraContentData?: Record;
+}
+
export class ConfirmationDialogInput {
title?: string;
titleColor?: TitleColor;
@@ -28,6 +35,8 @@ export class ConfirmationDialogInput {
disableConfirm?: boolean;
denyText?: string;
translateParams?: Record;
+ checkboxes?: CheckBox[];
+ toastMessage?: string;
constructor(options?: ConfirmationDialogInput) {
this.title = options?.title || _('common.confirmation-dialog.title');
@@ -41,6 +50,8 @@ export class ConfirmationDialogInput {
this.disableConfirm = options?.disableConfirm || false;
this.denyText = options?.denyText || _('common.confirmation-dialog.deny');
this.translateParams = options?.translateParams || {};
+ this.checkboxes = options?.checkboxes || [];
+ this.toastMessage = options?.toastMessage;
}
}
@@ -52,6 +63,7 @@ export class ConfirmationDialogInput {
export class ConfirmationDialogComponent {
config: ConfirmationDialogInput;
inputValue = '';
+ showToast = false;
readonly inputLabel: string;
readonly ConfirmOptions = ConfirmOptions;
@@ -62,9 +74,11 @@ export class ConfirmationDialogComponent {
) {
this.config = _confirmationDialogInput ?? new ConfirmationDialogInput();
this.translate(this.config);
- this.inputLabel = `${this._translateService.instant('confirmation-dialog.input-label')} '${
- this.config.confirmationText || ''
- }'`;
+ this.inputLabel = `${this._translateService.instant('confirmation-dialog.input-label')} '${this.config.confirmationText || ''}'`;
+ }
+
+ get uncheckedBoxes(): boolean {
+ return !!this.config.checkboxes?.some(c => !c.value);
}
get isDeleteAction(): boolean {
@@ -87,7 +101,11 @@ export class ConfirmationDialogComponent {
}
confirm(option: ConfirmOptions): void {
- this._dialogRef.close(option);
+ if (this.uncheckedBoxes) {
+ this.showToast = true;
+ } else {
+ this._dialogRef.close(option);
+ }
}
translate(obj: ConfirmationDialogInput): void {