Add a z-index input property on ng-http-loader component

README.md

@@ -130,6 +130,7 @@ export class InlineComponent {
 You can customize the following parameters:
   - The spinner **backdrop** (visible by default).
   - The **background-color** (ie. the color of the spinner itself).
+  - The spinner and its backdrop **z-index**.
   - The **debounce delay** (ie. after how many milliseconds the spinner will be visible, if needed).
   - The **extra duration** (ie. how many extra milliseconds should the spinner be visible).
   - The **minimum duration** (ie. how many milliseconds should the spinner be visible at least).
@@ -141,6 +142,7 @@ You can customize the following parameters:
 <ng-http-loader 
     [backdrop]="false"
     [backgroundColor]="'#ff0000'"
+    [zIndex]=50
     [debounceDelay]="100"
     [extraDuration]="300"
     [minDuration]="300"

src/lib/components/ng-http-loader.component.html

@@ -2,6 +2,7 @@
      *ngIf="isVisible$ | async"
      [class.backdrop]="backdrop"
      [style.opacity]="opacity"
+     [style.z-index]="zIndex"
      [ngStyle]="{'background-color': backdrop ? backdropBackgroundColor : 'transparent'}">
 
     <ng-container *ngComponentOutlet="entryComponent"></ng-container>

src/lib/components/ng-http-loader.component.scss

@@ -5,7 +5,6 @@
     left: 50%;
     transform: translate(-50%, -50%);
     position: fixed;
-    z-index: 9999;
 
     &.backdrop {
         top: 0;

src/lib/components/ng-http-loader.component.ts

@@ -27,6 +27,7 @@ export class NgHttpLoaderComponent implements OnInit {
 
     @Input() backdrop = true;
     @Input() backgroundColor!: string;
+    @Input() zIndex = 9999;
     @Input() debounceDelay = 0;
     @Input() entryComponent: any = null;
     @Input() extraDuration = 0;

src/test/components/ng-http-loader.component.spec.ts

@@ -836,4 +836,29 @@ describe('NgHttpLoaderComponent', () => {
 
         expect(element.style.backgroundColor).toBe('transparent');
     });
+
+    it("should have a default specified z-index of 9999 for the background", () => {
+        component.isVisible$ = of(true);
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.zIndex).toBe('9999');
+    })
+
+    it("should have the specified z-index set for the background", () => {
+        component.isVisible$ = of(true);
+        component.zIndex = 50;
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.zIndex).toBe('50');
+    })
 });