[HIMA-848] now the error modal is displayed on top of every other modal

libs/ui/src/lib/modal/modal.component.scss

@@ -8,19 +8,27 @@
   left: 0;
 
   /* z-index must be higher than .jw-modal-background */
-  z-index: 1000;
+  z-index: 999;
+
+  &.higher-order {
+    z-index: 1000;
+  }
 
   /* enables scrolling for tall modals */
   overflow: auto;
 
   .app-modal-body {
     background-color: white;
-    z-index: 1000;
+    z-index: 999;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 3px;
+
+    &.higher-order {
+      z-index: 1000;
+    }
   }
 }
 

libs/ui/src/lib/modal/modal.component.ts

@@ -4,8 +4,8 @@ import { ModalService } from './modal.service';
 @Component({
   selector: 'app-modal',
   template: `
-    <div class="app-modal">
-      <div class="app-modal-body">
+    <div class="app-modal" [ngClass]="{ 'higher-order': higerOder }">
+      <div class="app-modal-body" [ngClass]="{ 'higher-order': higerOder }">
         <ng-content></ng-content>
       </div>
       <div class="app-modal-background" [ngClass]="{ branch: branch }"></div>
@@ -17,6 +17,7 @@ import { ModalService } from './modal.service';
 export class ModalComponent implements OnInit, OnDestroy {
   @Input() id: string;
   @Input() branch = false;
+  @Input() higerOder = false;
   private element: any;
 
   constructor(private modalService: ModalService, private el: ElementRef) {