Enhancement: confirm buttons (#5680)

src-ui/src/app/components/common/confirm-button/confirm-button.component.ts

@@ -0,0 +1,55 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+
+@Component({
+  selector: 'pngx-confirm-button',
+  templateUrl: './confirm-button.component.html',
+  styleUrl: './confirm-button.component.scss',
+})
+export class ConfirmButtonComponent {
+  @Input()
+  label: string
+
+  @Input()
+  confirmMessage: string = $localize`Are you sure?`
+
+  @Input()
+  buttonClasses: string = 'btn-primary'
+
+  @Input()
+  iconName: string
+
+  @Input()
+  disabled: boolean = false
+
+  @Output()
+  confirm: EventEmitter<void> = new EventEmitter<void>()
+
+  @ViewChild('popover') popover: NgbPopover
+
+  public confirming: boolean = false
+
+  public onClick(event: MouseEvent) {
+    if (!this.confirming) {
+      this.confirming = true
+      this.popover.open()
+    }
+
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+
+  public onConfirm(event: MouseEvent) {
+    this.confirm.emit()
+    this.confirming = false
+
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+}