|
done
|
Type : number
|
Default value : 0
|
|
|
|
open
|
Type : boolean
|
Default value : false
|
|
|
|
total
|
Type : number
|
Default value : 0
|
|
|
import { Component, EventEmitter, Input, Output } from '@angular/core'
@Component({
selector: 'app-bulk-validation-modal',
templateUrl: './bulk-validation-modal.component.html',
styleUrls: ['./bulk-validation-modal.component.scss'],
standalone: false
})
export class BulkValidationModalComponent {
@Input() open = false
@Input() done = 0
@Input() total = 0
@Output() cancel = new EventEmitter<void>()
onCancel() {
this.cancel.emit()
}
}
<clr-modal
[clrModalOpen]="open"
[clrModalClosable]="false"
[clrModalStaticBackdrop]="true"
[clrModalSize]="'sm'"
>
<h3 class="modal-title">Validating cells</h3>
<div class="modal-body bulk-validation-body">
<div class="bulk-validation-row">
<clr-spinner clrSmall></clr-spinner>
<span class="bulk-validation-text">
Validating {{ done }} / {{ total }}…
</span>
</div>
<clr-progress-bar
class="bulk-validation-progress"
[clrValue]="done"
[clrMax]="total"
></clr-progress-bar>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="onCancel()">
Cancel
</button>
</div>
</clr-modal>
.bulk-validation-body {
display: flex;
flex-direction: column;
gap: 10px;
.bulk-validation-row {
display: flex;
align-items: center;
gap: 10px;
}
.bulk-validation-text {
flex: 1 1 auto;
}
.bulk-validation-progress {
margin: 0;
}
}
Legend
Html element with directive