common-ui/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html
Dan Percic f140f1fc16 lints
2023-08-30 10:10:36 +03:00

58 lines
2.5 KiB
HTML

<section class="dialog">
<div [class.warn]="isDeleteAction" [innerHTML]="config.title" class="dialog-header heading-l"></div>
<div *ngIf="showToast && config.toastMessage" class="inline-dialog-toast toast-error">
<div [translate]="config.toastMessage"></div>
<a (click)="showToast = false" class="toast-close-button">
<mat-icon svgIcon="iqser:close"></mat-icon>
</a>
</div>
<div class="dialog-content">
<p [class.heading]="isDeleteAction" [innerHTML]="config.question" class="mt-0 mb-8"></p>
<p *ngIf="config.details" [innerHTML]="config.details" class="mt-0"></p>
<div *ngIf="config.requireInput" class="iqser-input-group required w-300 mt-24">
<label>{{ inputLabel }}</label>
<input [(ngModel)]="inputValue" id="confirmation-input" />
</div>
<div *ngIf="config.checkboxes.length > 0" class="mt-24 checkboxes-wrapper">
<ng-container *ngFor="let checkbox of config.checkboxes">
<mat-checkbox [(ngModel)]="checkbox.value" [class.error]="!checkbox.value && showToast" color="primary">
{{ checkbox.label | translate: config.translateParams }}
</mat-checkbox>
<ng-container *ngTemplateOutlet="checkbox.extraContent; context: { data: checkbox.extraContentData }"></ng-container>
</ng-container>
</div>
</div>
<div class="dialog-actions">
<iqser-icon-button
(action)="confirm(confirmOption)"
[disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
[label]="config.confirmationText"
[type]="iconButtonTypes.primary"
buttonId="confirm"
></iqser-icon-button>
<iqser-icon-button
(action)="confirm(confirmOptions.SECOND_CONFIRM)"
*ngIf="config.alternativeConfirmationText"
[disabled]="config.requireInput && confirmationDoesNotMatch()"
[label]="config.alternativeConfirmationText"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
<div (click)="confirm(confirmOptions.DISCARD_CHANGES)" *ngIf="config.discardChangesText" class="all-caps-label cancel">
{{ config.discardChangesText }}
</div>
<div (click)="deny()" *ngIf="!config.discardChangesText" class="all-caps-label cancel">
{{ config.denyText }}
</div>
</div>
<iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
</section>