From 28c358f32187ad0180d8207ae8f25328a7fef646 Mon Sep 17 00:00:00 2001
From: Thibaut Septon <tsepton@gmail.com>
Date: Wed, 13 Dec 2023 15:42:49 +0100
Subject: [PATCH] Add customStyle input property

---
 README.md                                           |  2 ++
 src/lib/components/ng-http-loader.component.html    |  3 ++-
 src/lib/components/ng-http-loader.component.ts      |  1 +
 .../components/ng-http-loader.component.spec.ts     | 13 +++++++++++++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bf9e13e..ffc7d13 100644
--- a/README.md
+++ b/README.md
@@ -136,6 +136,7 @@ You can customize the following parameters:
   - The spinner **opacity**.
   - The backdrop **background-color** (ie. the color of the spinner backdrop, if enabled).
   - The **spinner type**.
+  - The spinner **style**.
 
 ```xml
 <ng-http-loader 
@@ -147,6 +148,7 @@ You can customize the following parameters:
     [opacity]=".6"
     [backdropBackgroundColor]="'#777777'"
     [spinner]="spinkit.skWave">
+    [customStyle]="{'z-index': 100}"
 </ng-http-loader>
 ```
 
diff --git a/src/lib/components/ng-http-loader.component.html b/src/lib/components/ng-http-loader.component.html
index e912f62..a5a5384 100644
--- a/src/lib/components/ng-http-loader.component.html
+++ b/src/lib/components/ng-http-loader.component.html
@@ -2,7 +2,8 @@
      *ngIf="isVisible$ | async"
      [class.backdrop]="backdrop"
      [style.opacity]="opacity"
-     [ngStyle]="{'background-color': backdrop ? backdropBackgroundColor : 'transparent'}">
+     [style.backgroundColor]="backdrop ? backdropBackgroundColor : 'transparent'"
+     [ngStyle]="customStyle">
 
     <ng-container *ngComponentOutlet="entryComponent"></ng-container>
 
diff --git a/src/lib/components/ng-http-loader.component.ts b/src/lib/components/ng-http-loader.component.ts
index 25d194c..eb59383 100644
--- a/src/lib/components/ng-http-loader.component.ts
+++ b/src/lib/components/ng-http-loader.component.ts
@@ -37,6 +37,7 @@ export class NgHttpLoaderComponent implements OnInit {
     @Input() opacity = '.7';
     @Input() backdropBackgroundColor = '#f1f1f1';
     @Input() spinner: string | null = Spinkit.skWave;
+    @Input() customStyle: { [klass: string]: any; } = {};
 
     constructor(private pendingRequestsInterceptor: PendingRequestsInterceptor, private spinnerVisibility: SpinnerVisibilityService) {
     }
diff --git a/src/test/components/ng-http-loader.component.spec.ts b/src/test/components/ng-http-loader.component.spec.ts
index 1467f0e..9b351ab 100644
--- a/src/test/components/ng-http-loader.component.spec.ts
+++ b/src/test/components/ng-http-loader.component.spec.ts
@@ -836,4 +836,17 @@ describe('NgHttpLoaderComponent', () => {
 
         expect(element.style.backgroundColor).toBe('transparent');
     });
+
+    it("should apply custom styling", () => {
+        component.isVisible$ = of(true);
+        component.customStyle = {"z-index": 86};
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.zIndex).toBe("86");
+    });
 });