Skip to content

Commit b9261cb

Browse files
mpalourdiompalourdio
authored
Merge pull request #208 from mpalourdio/signal
feat: Drop @input in favor of signals
2 parents 7dee073 + dedf341 commit b9261cb

24 files changed

+130
-128
lines changed

‎CHANGELOG.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Changelog
22

3+
## v17.1.0
4+
- Drop `@Input` in favor of `signals`.
5+
36
## v17.0.0
47
- Added angular 19 support.
58
- Drop `NgModule` module support.

‎package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-http-loader",
3-
"version": "17.0.0",
3+
"version": "17.1.0",
44
"scripts": {
55
"ng": "ng",
66
"build": "ng build",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
88
*/
99

10-
import { Input, Directive } from '@angular/core';
10+
import { Directive, model } from '@angular/core';
1111

1212
@Directive()
1313
export abstract class AbstractLoaderDirective {
1414

15-
@Input() backgroundColor!: string;
15+
backgroundColor = model<string>();
1616
}

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

+20-20
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
11
<div id="spinner"
22
*ngIf="isVisible$ | async"
3-
[class.backdrop]="backdrop"
4-
[style.opacity]="opacity"
5-
[ngStyle]="{'background-color': backdrop ? backdropBackgroundColor : 'transparent'}">
3+
[class.backdrop]="backdrop()"
4+
[style.opacity]="opacity()"
5+
[ngStyle]="{'background-color': backdrop() ? backdropBackgroundColor() : 'transparent'}">
66

7-
<ng-container *ngComponentOutlet="entryComponent"></ng-container>
7+
<ng-container *ngComponentOutlet="entryComponent()"></ng-container>
88

99
<sk-cube-grid
10-
*ngIf="spinner === spinkit.skCubeGrid"
11-
[backgroundColor]="backgroundColor">
10+
*ngIf="spinner() === spinkit.skCubeGrid"
11+
[backgroundColor]="backgroundColor()">
1212
</sk-cube-grid>
1313

1414
<sk-chasing-dots
15-
*ngIf="spinner === spinkit.skChasingDots"
16-
[backgroundColor]="backgroundColor">
15+
*ngIf="spinner() === spinkit.skChasingDots"
16+
[backgroundColor]="backgroundColor()">
1717
</sk-chasing-dots>
1818

1919
<sk-double-bounce
20-
*ngIf="spinner === spinkit.skDoubleBounce"
21-
[backgroundColor]="backgroundColor">
20+
*ngIf="spinner() === spinkit.skDoubleBounce"
21+
[backgroundColor]="backgroundColor()">
2222
</sk-double-bounce>
2323

2424
<sk-rotating-plane
25-
*ngIf="spinner === spinkit.skRotatingPlane"
26-
[backgroundColor]="backgroundColor">
25+
*ngIf="spinner() === spinkit.skRotatingPlane"
26+
[backgroundColor]="backgroundColor()">
2727
</sk-rotating-plane>
2828

2929
<sk-spinner-pulse
30-
*ngIf="spinner === spinkit.skSpinnerPulse"
31-
[backgroundColor]="backgroundColor">
30+
*ngIf="spinner() === spinkit.skSpinnerPulse"
31+
[backgroundColor]="backgroundColor()">
3232
</sk-spinner-pulse>
3333

3434
<sk-three-bounce
35-
*ngIf="spinner === spinkit.skThreeBounce"
36-
[backgroundColor]="backgroundColor">
35+
*ngIf="spinner() === spinkit.skThreeBounce"
36+
[backgroundColor]="backgroundColor()">
3737
</sk-three-bounce>
3838

3939
<sk-wandering-cubes
40-
*ngIf="spinner === spinkit.skWanderingCubes"
41-
[backgroundColor]="backgroundColor">
40+
*ngIf="spinner() === spinkit.skWanderingCubes"
41+
[backgroundColor]="backgroundColor()">
4242
</sk-wandering-cubes>
4343

4444
<sk-wave
45-
*ngIf="spinner === spinkit.skWave"
46-
[backgroundColor]="backgroundColor">
45+
*ngIf="spinner() === spinkit.skWave"
46+
[backgroundColor]="backgroundColor()">
4747
</sk-wave>
4848

4949
</div>

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

+22-22
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
88
*/
99

10-
import { Component, Input, OnInit, Type } from '@angular/core';
10+
import { Component, model, OnInit, Type } from '@angular/core';
1111
import { merge, Observable, partition, timer } from 'rxjs';
1212
import { debounce, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
1313
import { SpinnerVisibilityService } from '../services/spinner-visibility.service';
@@ -28,18 +28,18 @@ export class NgHttpLoaderComponent implements OnInit {
2828
isVisible$!: Observable<boolean>;
2929
visibleUntil = Date.now();
3030

31-
@Input() backdrop = true;
32-
@Input() backgroundColor!: string;
33-
@Input() debounceDelay = 0;
34-
@Input() entryComponent!: Type<unknown> | null;
35-
@Input() extraDuration = 0;
36-
@Input() filteredHeaders: string[] = [];
37-
@Input() filteredMethods: string[] = [];
38-
@Input() filteredUrlPatterns: string[] = [];
39-
@Input() minDuration = 0;
40-
@Input() opacity = '.7';
41-
@Input() backdropBackgroundColor = '#f1f1f1';
42-
@Input() spinner: string | null = Spinkit.skWave;
31+
backdrop = model<boolean>(true);
32+
backgroundColor = model<string>();
33+
debounceDelay = model<number>(0);
34+
entryComponent = model<Type<unknown> | null>(null);
35+
extraDuration = model<number>(0);
36+
filteredHeaders = model<string[]>([]);
37+
filteredMethods = model<string[]>([]);
38+
filteredUrlPatterns = model<string[]>([]);
39+
minDuration = model<number>(0);
40+
opacity = model<string>('.7');
41+
backdropBackgroundColor = model<string>('#f1f1f1');
42+
spinner = model<string | null>(Spinkit.skWave);
4343

4444
constructor(private pendingRequestsInterceptorConfigurer: PendingRequestsInterceptorConfigurer, private spinnerVisibility: SpinnerVisibilityService) {
4545
}
@@ -55,7 +55,7 @@ export class NgHttpLoaderComponent implements OnInit {
5555

5656
this.isVisible$ = merge(
5757
this.pendingRequestsInterceptorConfigurer.pendingRequestsStatus$
58-
.pipe(switchMap(() => showSpinner$.pipe(debounce(() => timer(this.debounceDelay))))),
58+
.pipe(switchMap(() => showSpinner$.pipe(debounce(() => timer(this.debounceDelay()))))),
5959
showSpinner$
6060
.pipe(switchMap(() => hideSpinner$.pipe(debounce(() => this.getVisibilityTimer$())))),
6161
this.spinnerVisibility.visibility$
@@ -66,8 +66,8 @@ export class NgHttpLoaderComponent implements OnInit {
6666
}
6767

6868
private nullifySpinnerIfEntryComponentIsDefined(): void {
69-
if (this.entryComponent) {
70-
this.spinner = null;
69+
if (this.entryComponent()) {
70+
this.spinner.set(null);
7171
}
7272
}
7373

@@ -78,28 +78,28 @@ export class NgHttpLoaderComponent implements OnInit {
7878
}
7979

8080
private initFilteredUrlPatterns(): void {
81-
if (!!this.filteredUrlPatterns.length) {
82-
this.filteredUrlPatterns.forEach(e =>
81+
if (!!this.filteredUrlPatterns().length) {
82+
this.filteredUrlPatterns().forEach(e =>
8383
this.pendingRequestsInterceptorConfigurer.filteredUrlPatterns.push(new RegExp(e))
8484
);
8585
}
8686
}
8787

8888
private initFilteredMethods(): void {
89-
this.pendingRequestsInterceptorConfigurer.filteredMethods = this.filteredMethods;
89+
this.pendingRequestsInterceptorConfigurer.filteredMethods = this.filteredMethods();
9090
}
9191

9292
private initFilteredHeaders(): void {
93-
this.pendingRequestsInterceptorConfigurer.filteredHeaders = this.filteredHeaders;
93+
this.pendingRequestsInterceptorConfigurer.filteredHeaders = this.filteredHeaders();
9494
}
9595

9696
private updateExpirationDelay(showSpinner: boolean): void {
9797
if (showSpinner) {
98-
this.visibleUntil = Date.now() + this.minDuration;
98+
this.visibleUntil = Date.now() + this.minDuration();
9999
}
100100
}
101101

102102
private getVisibilityTimer$(): Observable<number> {
103-
return timer(Math.max(this.extraDuration, this.visibleUntil - Date.now()));
103+
return timer(Math.max(this.extraDuration(), this.visibleUntil - Date.now()));
104104
}
105105
}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
-->
2121

22-
<div class="sk-chasing-dots" [class.colored]="!backgroundColor">
23-
<div class="sk-child sk-dot1" [style.background-color]='backgroundColor'></div>
24-
<div class="sk-child sk-dot2" [style.background-color]='backgroundColor'></div>
22+
<div class="sk-chasing-dots" [class.colored]="!backgroundColor()">
23+
<div class="sk-child sk-dot1" [style.background-color]='backgroundColor()'></div>
24+
<div class="sk-child sk-dot2" [style.background-color]='backgroundColor()'></div>
2525
</div>

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
-->
2121

22-
<div class="sk-cube-grid" [class.colored]="!backgroundColor">
23-
<div class="sk-cube sk-cube1" [style.background-color]='backgroundColor'></div>
24-
<div class="sk-cube sk-cube2" [style.background-color]='backgroundColor'></div>
25-
<div class="sk-cube sk-cube3" [style.background-color]='backgroundColor'></div>
26-
<div class="sk-cube sk-cube4" [style.background-color]='backgroundColor'></div>
27-
<div class="sk-cube sk-cube5" [style.background-color]='backgroundColor'></div>
28-
<div class="sk-cube sk-cube6" [style.background-color]='backgroundColor'></div>
29-
<div class="sk-cube sk-cube7" [style.background-color]='backgroundColor'></div>
30-
<div class="sk-cube sk-cube8" [style.background-color]='backgroundColor'></div>
31-
<div class="sk-cube sk-cube9" [style.background-color]='backgroundColor'></div>
22+
<div class="sk-cube-grid" [class.colored]="!backgroundColor()">
23+
<div class="sk-cube sk-cube1" [style.background-color]='backgroundColor()'></div>
24+
<div class="sk-cube sk-cube2" [style.background-color]='backgroundColor()'></div>
25+
<div class="sk-cube sk-cube3" [style.background-color]='backgroundColor()'></div>
26+
<div class="sk-cube sk-cube4" [style.background-color]='backgroundColor()'></div>
27+
<div class="sk-cube sk-cube5" [style.background-color]='backgroundColor()'></div>
28+
<div class="sk-cube sk-cube6" [style.background-color]='backgroundColor()'></div>
29+
<div class="sk-cube sk-cube7" [style.background-color]='backgroundColor()'></div>
30+
<div class="sk-cube sk-cube8" [style.background-color]='backgroundColor()'></div>
31+
<div class="sk-cube sk-cube9" [style.background-color]='backgroundColor()'></div>
3232
</div>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
-->
2121

22-
<div class="sk-double-bounce" [class.colored]="!backgroundColor">
23-
<div class="sk-child sk-double-bounce1" [style.background-color]='backgroundColor'></div>
24-
<div class="sk-child sk-double-bounce2" [style.background-color]='backgroundColor'></div>
22+
<div class="sk-double-bounce" [class.colored]="!backgroundColor()">
23+
<div class="sk-child sk-double-bounce1" [style.background-color]='backgroundColor()'></div>
24+
<div class="sk-child sk-double-bounce2" [style.background-color]='backgroundColor()'></div>
2525
</div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,4 @@
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
-->
2121

22-
<div class="sk-rotating-plane colored-parent" [style.background-color]='backgroundColor'></div>
22+
<div class="sk-rotating-plane colored-parent" [style.background-color]='backgroundColor()'></div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,4 @@
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
-->
2121

22-
<div class="sk-spinner sk-spinner-pulse colored-parent" [style.background-color]='backgroundColor'></div>
22+
<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

+4-4
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
-->
2121

22-
<div class="sk-three-bounce" [class.colored]="!backgroundColor">
23-
<div class="sk-child sk-bounce1" [style.background-color]='backgroundColor'></div>
24-
<div class="sk-child sk-bounce2" [style.background-color]='backgroundColor'></div>
25-
<div class="sk-child sk-bounce3" [style.background-color]='backgroundColor'></div>
22+
<div class="sk-three-bounce" [class.colored]="!backgroundColor()">
23+
<div class="sk-child sk-bounce1" [style.background-color]='backgroundColor()'></div>
24+
<div class="sk-child sk-bounce2" [style.background-color]='backgroundColor()'></div>
25+
<div class="sk-child sk-bounce3" [style.background-color]='backgroundColor()'></div>
2626
</div>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
-->
2121

22-
<div class="sk-wandering-cubes" [class.colored]="!backgroundColor">
23-
<div class="sk-cube sk-cube1" [style.background-color]='backgroundColor'></div>
24-
<div class="sk-cube sk-cube2" [style.background-color]='backgroundColor'></div>
22+
<div class="sk-wandering-cubes" [class.colored]="!backgroundColor()">
23+
<div class="sk-cube sk-cube1" [style.background-color]='backgroundColor()'></div>
24+
<div class="sk-cube sk-cube2" [style.background-color]='backgroundColor()'></div>
2525
</div>

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

+6-7
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,10 @@
1818
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
-->
21-
22-
<div class="sk-wave" [class.colored]="!backgroundColor">
23-
<div class="sk-rect sk-rect1" [style.background-color]='backgroundColor'></div>
24-
<div class="sk-rect sk-rect2" [style.background-color]='backgroundColor'></div>
25-
<div class="sk-rect sk-rect3" [style.background-color]='backgroundColor'></div>
26-
<div class="sk-rect sk-rect4" [style.background-color]='backgroundColor'></div>
27-
<div class="sk-rect sk-rect5" [style.background-color]='backgroundColor'></div>
21+
<div class="sk-wave" [class.colored]="!backgroundColor()">
22+
<div class="sk-rect sk-rect1" [style.background-color]='backgroundColor()'></div>
23+
<div class="sk-rect sk-rect2" [style.background-color]='backgroundColor()'></div>
24+
<div class="sk-rect sk-rect3" [style.background-color]='backgroundColor()'></div>
25+
<div class="sk-rect sk-rect4" [style.background-color]='backgroundColor()'></div>
26+
<div class="sk-rect sk-rect5" [style.background-color]='backgroundColor()'></div>
2827
</div>

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe('NgHttpLoaderComponentOutlet', () => {
3232

3333
it('should be possible to specify an entryComponent', () => {
3434
component.isVisible$ = of(true);
35-
component.entryComponent = SkThreeBounceComponent;
35+
component.entryComponent.set(SkThreeBounceComponent);
3636
fixture.detectChanges();
3737

3838
const element = fixture
@@ -44,19 +44,19 @@ describe('NgHttpLoaderComponentOutlet', () => {
4444
});
4545

4646
it('should force [spinner] to null if [entryComponent] is defined', () => {
47-
component.spinner = 'spinner-name';
48-
component.entryComponent = SkThreeBounceComponent;
47+
component.spinner.set('spinner-name');
48+
component.entryComponent.set(SkThreeBounceComponent);
4949
component.ngOnInit();
5050

51-
expect(component.spinner).toBeNull();
51+
expect(component.spinner()).toBeNull();
5252
});
5353

5454
it('should correctly check [entryComponent] with null', () => {
5555
const spinnerName = 'spinner-name';
56-
component.spinner = spinnerName;
57-
component.entryComponent = null;
56+
component.spinner.set(spinnerName);
57+
component.entryComponent.set(null);
5858
component.ngOnInit();
5959

60-
expect(component.spinner).toBe(spinnerName);
60+
expect(component.spinner()).toBe(spinnerName);
6161
});
6262
});

0 commit comments

Comments
 (0)