feat: Drop @Input in favor of signals

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v17.1.0
+- Drop `@Input` in favor of `signals`.
+
 ## v17.0.0
 - Added angular 19 support.
 - Drop `NgModule` module support.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-http-loader",
-  "version": "17.0.0",
+  "version": "17.1.0",
   "scripts": {
     "ng": "ng",
     "build": "ng build",

src/lib/components/abstract.loader.directive.ts

@@ -7,10 +7,10 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Input, Directive } from '@angular/core';
+import { Directive, model } from '@angular/core';
 
 @Directive()
 export abstract class AbstractLoaderDirective {
 
-    @Input() backgroundColor!: string;
+    backgroundColor = model<string>();
 }

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

@@ -1,49 +1,49 @@
 <div id="spinner"
      *ngIf="isVisible$ | async"
-     [class.backdrop]="backdrop"
-     [style.opacity]="opacity"
-     [ngStyle]="{'background-color': backdrop ? backdropBackgroundColor : 'transparent'}">
+     [class.backdrop]="backdrop()"
+     [style.opacity]="opacity()"
+     [ngStyle]="{'background-color': backdrop() ? backdropBackgroundColor() : 'transparent'}">
 
-    <ng-container *ngComponentOutlet="entryComponent"></ng-container>
+    <ng-container *ngComponentOutlet="entryComponent()"></ng-container>
 
     <sk-cube-grid
-        *ngIf="spinner === spinkit.skCubeGrid"
-        [backgroundColor]="backgroundColor">
+        *ngIf="spinner() === spinkit.skCubeGrid"
+        [backgroundColor]="backgroundColor()">
     </sk-cube-grid>
 
     <sk-chasing-dots
-        *ngIf="spinner === spinkit.skChasingDots"
-        [backgroundColor]="backgroundColor">
+        *ngIf="spinner() === spinkit.skChasingDots"
+        [backgroundColor]="backgroundColor()">
     </sk-chasing-dots>
 
     <sk-double-bounce
-        *ngIf="spinner === spinkit.skDoubleBounce"
-        [backgroundColor]="backgroundColor">
+        *ngIf="spinner() === spinkit.skDoubleBounce"
+        [backgroundColor]="backgroundColor()">
     </sk-double-bounce>
 
     <sk-rotating-plane
-        *ngIf="spinner === spinkit.skRotatingPlane"
-        [backgroundColor]="backgroundColor">
+        *ngIf="spinner() === spinkit.skRotatingPlane"
+        [backgroundColor]="backgroundColor()">
     </sk-rotating-plane>
 
     <sk-spinner-pulse
-        *ngIf="spinner === spinkit.skSpinnerPulse"
-        [backgroundColor]="backgroundColor">
+        *ngIf="spinner() === spinkit.skSpinnerPulse"
+        [backgroundColor]="backgroundColor()">
     </sk-spinner-pulse>
 
     <sk-three-bounce
-        *ngIf="spinner === spinkit.skThreeBounce"
-        [backgroundColor]="backgroundColor">
+        *ngIf="spinner() === spinkit.skThreeBounce"
+        [backgroundColor]="backgroundColor()">
     </sk-three-bounce>
 
     <sk-wandering-cubes
-        *ngIf="spinner === spinkit.skWanderingCubes"
-        [backgroundColor]="backgroundColor">
+        *ngIf="spinner() === spinkit.skWanderingCubes"
+        [backgroundColor]="backgroundColor()">
     </sk-wandering-cubes>
 
     <sk-wave
-        *ngIf="spinner === spinkit.skWave"
-        [backgroundColor]="backgroundColor">
+        *ngIf="spinner() === spinkit.skWave"
+        [backgroundColor]="backgroundColor()">
     </sk-wave>
 
 </div>

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

@@ -7,7 +7,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Component, Input, OnInit, Type } from '@angular/core';
+import { Component, model, OnInit, Type } from '@angular/core';
 import { merge, Observable, partition, timer } from 'rxjs';
 import { debounce, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
 import { SpinnerVisibilityService } from '../services/spinner-visibility.service';
@@ -28,18 +28,18 @@ export class NgHttpLoaderComponent implements OnInit {
     isVisible$!: Observable<boolean>;
     visibleUntil = Date.now();
 
-    @Input() backdrop = true;
-    @Input() backgroundColor!: string;
-    @Input() debounceDelay = 0;
-    @Input() entryComponent!: Type<unknown> | null;
-    @Input() extraDuration = 0;
-    @Input() filteredHeaders: string[] = [];
-    @Input() filteredMethods: string[] = [];
-    @Input() filteredUrlPatterns: string[] = [];
-    @Input() minDuration = 0;
-    @Input() opacity = '.7';
-    @Input() backdropBackgroundColor = '#f1f1f1';
-    @Input() spinner: string | null = Spinkit.skWave;
+    backdrop = model<boolean>(true);
+    backgroundColor = model<string>();
+    debounceDelay = model<number>(0);
+    entryComponent = model<Type<unknown> | null>(null);
+    extraDuration = model<number>(0);
+    filteredHeaders = model<string[]>([]);
+    filteredMethods = model<string[]>([]);
+    filteredUrlPatterns = model<string[]>([]);
+    minDuration = model<number>(0);
+    opacity = model<string>('.7');
+    backdropBackgroundColor = model<string>('#f1f1f1');
+    spinner = model<string | null>(Spinkit.skWave);
 
     constructor(private pendingRequestsInterceptorConfigurer: PendingRequestsInterceptorConfigurer, private spinnerVisibility: SpinnerVisibilityService) {
     }
@@ -55,7 +55,7 @@ export class NgHttpLoaderComponent implements OnInit {
 
         this.isVisible$ = merge(
             this.pendingRequestsInterceptorConfigurer.pendingRequestsStatus$
-                .pipe(switchMap(() => showSpinner$.pipe(debounce(() => timer(this.debounceDelay))))),
+                .pipe(switchMap(() => showSpinner$.pipe(debounce(() => timer(this.debounceDelay()))))),
             showSpinner$
                 .pipe(switchMap(() => hideSpinner$.pipe(debounce(() => this.getVisibilityTimer$())))),
             this.spinnerVisibility.visibility$
@@ -66,8 +66,8 @@ export class NgHttpLoaderComponent implements OnInit {
     }
 
     private nullifySpinnerIfEntryComponentIsDefined(): void {
-        if (this.entryComponent) {
-            this.spinner = null;
+        if (this.entryComponent()) {
+            this.spinner.set(null);
         }
     }
 
@@ -78,28 +78,28 @@ export class NgHttpLoaderComponent implements OnInit {
     }
 
     private initFilteredUrlPatterns(): void {
-        if (!!this.filteredUrlPatterns.length) {
-            this.filteredUrlPatterns.forEach(e =>
+        if (!!this.filteredUrlPatterns().length) {
+            this.filteredUrlPatterns().forEach(e =>
                 this.pendingRequestsInterceptorConfigurer.filteredUrlPatterns.push(new RegExp(e))
             );
         }
     }
 
     private initFilteredMethods(): void {
-        this.pendingRequestsInterceptorConfigurer.filteredMethods = this.filteredMethods;
+        this.pendingRequestsInterceptorConfigurer.filteredMethods = this.filteredMethods();
     }
 
     private initFilteredHeaders(): void {
-        this.pendingRequestsInterceptorConfigurer.filteredHeaders = this.filteredHeaders;
+        this.pendingRequestsInterceptorConfigurer.filteredHeaders = this.filteredHeaders();
     }
 
     private updateExpirationDelay(showSpinner: boolean): void {
         if (showSpinner) {
-            this.visibleUntil = Date.now() + this.minDuration;
+            this.visibleUntil = Date.now() + this.minDuration();
         }
     }
 
     private getVisibilityTimer$(): Observable<number> {
-        return timer(Math.max(this.extraDuration, this.visibleUntil - Date.now()));
+        return timer(Math.max(this.extraDuration(), this.visibleUntil - Date.now()));
     }
 }

src/lib/components/sk-chasing-dots/sk-chasing-dots.component.html

@@ -19,7 +19,7 @@
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
 
-<div class="sk-chasing-dots" [class.colored]="!backgroundColor">
-    <div class="sk-child sk-dot1" [style.background-color]='backgroundColor'></div>
-    <div class="sk-child sk-dot2" [style.background-color]='backgroundColor'></div>
+<div class="sk-chasing-dots" [class.colored]="!backgroundColor()">
+    <div class="sk-child sk-dot1" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-child sk-dot2" [style.background-color]='backgroundColor()'></div>
 </div>

src/lib/components/sk-cube-grid/sk-cube-grid.component.html

@@ -19,14 +19,14 @@
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
 
-<div class="sk-cube-grid" [class.colored]="!backgroundColor">
-    <div class="sk-cube sk-cube1" [style.background-color]='backgroundColor'></div>
-    <div class="sk-cube sk-cube2" [style.background-color]='backgroundColor'></div>
-    <div class="sk-cube sk-cube3" [style.background-color]='backgroundColor'></div>
-    <div class="sk-cube sk-cube4" [style.background-color]='backgroundColor'></div>
-    <div class="sk-cube sk-cube5" [style.background-color]='backgroundColor'></div>
-    <div class="sk-cube sk-cube6" [style.background-color]='backgroundColor'></div>
-    <div class="sk-cube sk-cube7" [style.background-color]='backgroundColor'></div>
-    <div class="sk-cube sk-cube8" [style.background-color]='backgroundColor'></div>
-    <div class="sk-cube sk-cube9" [style.background-color]='backgroundColor'></div>
+<div class="sk-cube-grid" [class.colored]="!backgroundColor()">
+    <div class="sk-cube sk-cube1" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-cube sk-cube2" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-cube sk-cube3" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-cube sk-cube4" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-cube sk-cube5" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-cube sk-cube6" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-cube sk-cube7" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-cube sk-cube8" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-cube sk-cube9" [style.background-color]='backgroundColor()'></div>
 </div>

src/lib/components/sk-double-bounce/sk-double-bounce.component.html

@@ -19,7 +19,7 @@
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
 
-<div class="sk-double-bounce" [class.colored]="!backgroundColor">
-    <div class="sk-child sk-double-bounce1" [style.background-color]='backgroundColor'></div>
-    <div class="sk-child sk-double-bounce2" [style.background-color]='backgroundColor'></div>
+<div class="sk-double-bounce" [class.colored]="!backgroundColor()">
+    <div class="sk-child sk-double-bounce1" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-child sk-double-bounce2" [style.background-color]='backgroundColor()'></div>
 </div>

src/lib/components/sk-rotating-plane/sk-rotating-plane.component.html

@@ -19,4 +19,4 @@
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
 
-<div class="sk-rotating-plane colored-parent" [style.background-color]='backgroundColor'></div>
+<div class="sk-rotating-plane colored-parent" [style.background-color]='backgroundColor()'></div>

src/lib/components/sk-spinner-pulse/sk-spinner-pulse.component.html

@@ -19,4 +19,4 @@
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
 
-<div class="sk-spinner sk-spinner-pulse colored-parent" [style.background-color]='backgroundColor'></div>
+<div class="sk-spinner sk-spinner-pulse colored-parent" [style.background-color]='backgroundColor()'></div>

src/lib/components/sk-three-bounce/sk-three-bounce.component.html

@@ -19,8 +19,8 @@
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
 
-<div class="sk-three-bounce" [class.colored]="!backgroundColor">
-    <div class="sk-child sk-bounce1" [style.background-color]='backgroundColor'></div>
-    <div class="sk-child sk-bounce2" [style.background-color]='backgroundColor'></div>
-    <div class="sk-child sk-bounce3" [style.background-color]='backgroundColor'></div>
+<div class="sk-three-bounce" [class.colored]="!backgroundColor()">
+    <div class="sk-child sk-bounce1" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-child sk-bounce2" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-child sk-bounce3" [style.background-color]='backgroundColor()'></div>
 </div>

src/lib/components/sk-wandering-cubes/sk-wandering-cubes.component.html

@@ -19,7 +19,7 @@
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
 
-<div class="sk-wandering-cubes" [class.colored]="!backgroundColor">
-    <div class="sk-cube sk-cube1" [style.background-color]='backgroundColor'></div>
-    <div class="sk-cube sk-cube2" [style.background-color]='backgroundColor'></div>
+<div class="sk-wandering-cubes" [class.colored]="!backgroundColor()">
+    <div class="sk-cube sk-cube1" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-cube sk-cube2" [style.background-color]='backgroundColor()'></div>
 </div>

src/lib/components/sk-wave/sk-wave.component.html

@@ -18,11 +18,10 @@
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
-
-<div class="sk-wave" [class.colored]="!backgroundColor">
-    <div class="sk-rect sk-rect1" [style.background-color]='backgroundColor'></div>
-    <div class="sk-rect sk-rect2" [style.background-color]='backgroundColor'></div>
-    <div class="sk-rect sk-rect3" [style.background-color]='backgroundColor'></div>
-    <div class="sk-rect sk-rect4" [style.background-color]='backgroundColor'></div>
-    <div class="sk-rect sk-rect5" [style.background-color]='backgroundColor'></div>
+<div class="sk-wave" [class.colored]="!backgroundColor()">
+    <div class="sk-rect sk-rect1" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-rect sk-rect2" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-rect sk-rect3" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-rect sk-rect4" [style.background-color]='backgroundColor()'></div>
+    <div class="sk-rect sk-rect5" [style.background-color]='backgroundColor()'></div>
 </div>

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

@@ -32,7 +32,7 @@ describe('NgHttpLoaderComponentOutlet', () => {
 
     it('should be possible to specify an entryComponent', () => {
         component.isVisible$ = of(true);
-        component.entryComponent = SkThreeBounceComponent;
+        component.entryComponent.set(SkThreeBounceComponent);
         fixture.detectChanges();
 
         const element = fixture
@@ -44,19 +44,19 @@ describe('NgHttpLoaderComponentOutlet', () => {
     });
 
     it('should force [spinner] to null if [entryComponent] is defined', () => {
-        component.spinner = 'spinner-name';
-        component.entryComponent = SkThreeBounceComponent;
+        component.spinner.set('spinner-name');
+        component.entryComponent.set(SkThreeBounceComponent);
         component.ngOnInit();
 
-        expect(component.spinner).toBeNull();
+        expect(component.spinner()).toBeNull();
     });
 
     it('should correctly check [entryComponent] with null', () => {
         const spinnerName = 'spinner-name';
-        component.spinner = spinnerName;
-        component.entryComponent = null;
+        component.spinner.set(spinnerName);
+        component.entryComponent.set(null);
         component.ngOnInit();
 
-        expect(component.spinner).toBe(spinnerName);
+        expect(component.spinner()).toBe(spinnerName);
     });
 });