add modal in similar case page

my-workspace/projects/sae-lib/modal/confirm/confirm.html

@@ -0,0 +1,34 @@
+<div class="confirm-modal-background">
+  <div class="confirm-modal">
+    <div class="title">
+
+      <ng-content select="modal-title">Search for new question</ng-content>
+    </div>
+    <div class="body">
+      <ng-content select="modal-main"></ng-content>
+      <ng-content>
+        <p>Do you need a search for new client’s question ?</p>
+        <p>
+          Once you click the bouton YES, you will leave this page and start a search for new client’s question.
+        </p>
+
+        <sae-alert-box [alertKind]="'warning'"
+                       [message]="'Current search results will disappear. Please copy important contents before leaving.'"></sae-alert-box>
+      </ng-content>
+    </div>
+    <div class="footer">
+      <div class="footer-text">
+        <ng-content select="modal-footer"></ng-content>
+      </div>
+      <div class="actions">
+
+        <ng-content (click)="confirm()" select="modal-confirm">
+          <sae-m-button [kind]="'ghost'">Yes</sae-m-button>
+        </ng-content>
+        <ng-content (click)="reject()" select="modal-reject">
+          <sae-m-button [kind]="'primary'">No, i stay</sae-m-button>
+        </ng-content>
+      </div>
+    </div>
+  </div>
+</div>

my-workspace/projects/sae-lib/modal/confirm/confirm.scss

@@ -0,0 +1,54 @@
+:host {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .confirm-modal {
+    width: 500px;
+    border-radius: 8px;
+    background: #FFF;
+    box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
+    padding: 24px 29px;
+
+  }
+
+  .body {
+    color: #000;
+    font-family: Barlow;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 120%; /* 16.8px */
+  }
+
+  .title {
+    color: #000;
+    leading-trim: both;
+    text-edge: cap;
+    font-family: Barlow;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px; /* 100% */
+
+    margin-bottom: 16px;
+  }
+
+  .actions {
+    padding-top: 24px;
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+  }
+
+  p {
+    margin-bottom: 16px;
+  }
+}

my-workspace/projects/sae-lib/modal/confirm/confirm.spec.ts

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

my-workspace/projects/sae-lib/modal/confirm/confirm.ts

@@ -0,0 +1,25 @@
+import {Component, Input} from '@angular/core';
+import {MainButton} from '../../buttons/main-button/main-button';
+import {AlertBox} from '../../alert-box/alert-box';
+
+@Component({
+  selector: 'sae-confirm',
+  imports: [
+    MainButton,
+    AlertBox
+  ],
+  templateUrl: './confirm.html',
+  styleUrl: './confirm.scss'
+})
+export class Confirm {
+
+  @Input() showWhen: any = false;
+
+  confirm() {
+
+  }
+
+  reject() {
+
+  }
+}