first chrome implementation

projects/common/src/lib/components/confirm/confirm.component.html

@@ -0,0 +1,28 @@
+<!-- eslint-disable @angular-eslint/template/elements-content -->
+<div [id]="idString" class="modal fade" data-bs-backdrop="static" tabindex="-1">
+  <div
+    class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable"
+  >
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Please confirm</h5>
+        <button
+          type="button"
+          class="btn-close"
+          (click)="modal?.hide(); no.emit()"
+        ></button>
+      </div>
+      <div class="modal-body">
+        <span>{{ message }}</span>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" (click)="modal?.hide()">
+          No
+        </button>
+        <button type="button" class="btn btn-primary" (click)="onClickYes()">
+          Yes
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

projects/common/src/lib/components/confirm/confirm.component.scss

@@ -0,0 +1,5 @@
+:host {
+  .modal {
+    --bs-modal-margin: 32px;
+  }
+}

projects/common/src/lib/components/confirm/confirm.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmComponent } from './confirm.component';
+
+describe('ConfirmComponent', () => {
+  let component: ConfirmComponent;
+  let fixture: ComponentFixture<ConfirmComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ConfirmComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ConfirmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/common/src/lib/components/confirm/confirm.component.ts

@@ -0,0 +1,42 @@
+import { AfterViewInit, Component, EventEmitter, Output } from '@angular/core';
+import * as bootstrap from 'bootstrap';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'lib-confirm',
+  imports: [],
+  templateUrl: './confirm.component.html',
+  styleUrl: './confirm.component.scss',
+})
+export class ConfirmComponent implements AfterViewInit {
+  @Output() yes = new EventEmitter<void>();
+  @Output() no = new EventEmitter<void>();
+
+  message: string | undefined;
+  onYes: ((() => Promise<void>) | (() => void)) | undefined;
+  modal: bootstrap.Modal | undefined;
+
+  readonly idString = crypto.randomUUID();
+
+  ngAfterViewInit(): void {
+    const myModalEl = document.getElementById(this.idString);
+    if (!myModalEl) {
+      return;
+    }
+
+    this.modal = new bootstrap.Modal(myModalEl);
+  }
+
+  onClickYes() {
+    this.modal?.hide();
+    if (typeof this.onYes !== 'undefined') {
+      this.onYes();
+    }
+  }
+
+  show(message: string, onYes: (() => Promise<void>) | (() => void)): void {
+    this.message = message;
+    this.onYes = onYes;
+    this.modal?.show();
+  }
+}