-
- @if (spinner) {
+ @if (spinner()) {
}
`,
+ providers: [NgProgressRef],
styleUrl: './ng-progress.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
+export class NgProgressbar {
-export class NgProgressComponent implements OnInit, OnChanges, OnDestroy {
-
- private _state!: Subscription;
- private _started!: Subscription;
- private _completed!: Subscription;
+ private readonly config: NgProgressOptions = inject(NG_PROGRESS_OPTIONS);
/** Progress bar worker */
- progressRef!: NgProgressRef;
-
- /** Creates a new instance if id is not already exists */
- @Input() id: string = 'root';
+ progressRef: NgProgressRef = inject(NgProgressRef, { host: true, self: true });
/** Initializes inputs from the global config */
- @Input() min: number = this._ngProgress.config.min;
- @Input() max: number = this._ngProgress.config.max;
- @Input() ease: string = this._ngProgress.config.ease;
- @Input() color: string = this._ngProgress.config.color;
- @Input() speed: number = this._ngProgress.config.speed;
- @Input() thick: boolean = this._ngProgress.config.thick;
- @Input() fixed: boolean = this._ngProgress.config.fixed;
- @Input() meteor: boolean = this._ngProgress.config.meteor;
- @Input() spinner: boolean = this._ngProgress.config.spinner;
- @Input() trickleSpeed: number = this._ngProgress.config.trickleSpeed;
- @Input() debounceTime: number = this._ngProgress.config.debounceTime;
- @Input() trickleFunc: (n: number) => number = this._ngProgress.config.trickleFunc;
- @Input() spinnerPosition: 'left' | 'right' = this._ngProgress.config.spinnerPosition;
- @Input() direction: 'ltr+' | 'ltr-' | 'rtl+' | 'rtl-' = this._ngProgress.config.direction;
- @Output() started: EventEmitter
= new EventEmitter();
- @Output() completed: EventEmitter = new EventEmitter();
-
- @ViewChild('progressbar', { static: true }) progressElement!: ElementRef;
- @ViewChild('progressbarWrapper', { static: true }) progressWrapperElement!: ElementRef;
-
- get isStarted() {
- return this.progressRef?.isStarted;
- }
-
- constructor(private _ngProgress: NgProgress) {
- }
-
- ngOnChanges(): void {
- // Update progress bar config when inputs change
- this.progressRef?.setConfig({
- max: (this.max > 0 && this.max <= 100) ? this.max : 100,
- min: (this.min < 100 && this.min >= 0) ? this.min : 0,
- speed: this.speed,
- trickleSpeed: this.trickleSpeed,
- trickleFunc: this.trickleFunc,
- debounceTime: this.debounceTime
+ min: InputSignalWithTransform = input(this.config.min, { transform: numberAttribute });
+ max: InputSignalWithTransform = input(this.config.max, { transform: numberAttribute });
+ speed: InputSignalWithTransform = input(this.config.speed, { transform: numberAttribute });
+ trickleSpeed: InputSignalWithTransform = input(this.config.trickleSpeed, { transform: numberAttribute });
+ debounceTime: InputSignalWithTransform = input(this.config.debounceTime, { transform: numberAttribute });
+
+ flat: InputSignalWithTransform = input(this.config.flat, { transform: booleanAttribute });
+ spinner: InputSignalWithTransform = input(this.config.spinner, { transform: booleanAttribute });
+ relative: InputSignalWithTransform = input(this.config.relative, { transform: booleanAttribute });
+
+ trickleFunc: InputSignal<(n: number) => number> = input(this.config.trickleFunc);
+ spinnerPosition: InputSignal<'left' | 'right'> = input(this.config.spinnerPosition);
+ direction: InputSignal<'ltr+' | 'ltr-' | 'rtl+' | 'rtl-'> = input(this.config.direction);
+
+ progressTransform: Signal = computed(() => {
+ return `translate3d(${ this.progressRef.progress() }%,0,0)`;
+ });
+
+ started: OutputRef = outputFromObservable(this.progressRef.started);
+
+ completed: OutputRef = outputFromObservable(this.progressRef.completed);
+
+ constructor() {
+ const element: HTMLElement = inject(ElementRef).nativeElement;
+
+ effect(() => {
+ setTimeout(() => {
+ element.style.setProperty('--_ng-progress-speed', `${ this.speed() }ms`);
+ // Update progress bar config when inputs change
+ this.progressRef.setConfig({
+ max: (this.max() > 0 && this.max() <= 100) ? this.max() : 100,
+ min: (this.min() < 100 && this.min() >= 0) ? this.min() : 0,
+ speed: this.speed(),
+ trickleSpeed: this.trickleSpeed(),
+ trickleFunc: this.trickleFunc(),
+ debounceTime: this.debounceTime()
+ });
+ });
});
}
- ngOnInit(): void {
- // Get progress bar service instance
- this.progressRef = this._ngProgress.ref(this.id, {
- max: this.max,
- min: this.min,
- speed: this.speed,
- trickleSpeed: this.trickleSpeed,
- debounceTime: this.debounceTime
- });
-
- // Subscribe to progress state
- const progress: HTMLElement = this.progressElement.nativeElement;
- const progressWrapper: HTMLElement = this.progressWrapperElement.nativeElement;
- this._state = this.progressRef.state.pipe(
- tap((state: ProgressState) => {
- progress.style.transform = `translate3d(${ state.value }%,0,0)`;
- if (state.active) {
- progress.style.transition = `all ${ this.speed }ms ${ this.ease }`;
- progressWrapper.setAttribute('active', 'true');
- } else {
- progress.style.transition = 'none';
- progressWrapper.setAttribute('active', 'false');
- }
- })
- ).subscribe();
-
- // Subscribes to started and completed events on demand
- if (this.started.observed) {
- this._started = this.progressRef.started.subscribe(() => this.started.emit());
- }
- if (this.completed.observed) {
- this._completed = this.progressRef.completed.subscribe(() => this.completed.emit());
- }
- }
-
- ngOnDestroy(): void {
- this._state?.unsubscribe();
- this._started?.unsubscribe();
- this._completed?.unsubscribe();
- this.progressRef?.destroy();
- }
-
start(): void {
this.progressRef.start();
}
diff --git a/projects/ngx-progressbar/src/lib/ng-progress.interceptor.spec.ts b/projects/ngx-progressbar/src/lib/ng-progress.interceptor.spec.ts
deleted file mode 100644
index d8ebf11..0000000
--- a/projects/ngx-progressbar/src/lib/ng-progress.interceptor.spec.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-
-import { NgProgressModule, NgProgress, NgProgressRef } from 'ngx-progressbar';
-import { NgProgressHttpModule } from 'ngx-progressbar/http';
-
-const CUSTOM_PROGRESS_ID: string = 'my-custom-progress';
-
-describe(`NgProgressHttp`, () => {
- let ngProgress: NgProgress;
- let httpClient: HttpClient;
- let httpTestingController: HttpTestingController;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [
- NgProgressModule,
- NgProgressHttpModule,
- HttpClientTestingModule
- ]
- });
-
- ngProgress = TestBed.inject(NgProgress);
- httpClient = TestBed.inject(HttpClient);
- httpTestingController = TestBed.inject(HttpTestingController);
- });
-
- it('should start the progress bar with http request', (done: DoneFn) => {
-
- const progressRef: NgProgressRef = ngProgress.ref();
- spyOn(progressRef, 'start');
- spyOn(progressRef, 'complete');
-
- httpClient.get('/users').subscribe(() => {
- // Check that progress.complete() has been called after the request is completed
- // Need to check that async
- setTimeout(() => {
- expect(progressRef.complete).toHaveBeenCalled();
- done();
- });
- });
-
- // Check that progress.start() has been called
- expect(progressRef.start).toHaveBeenCalled();
-
- const req = httpTestingController.expectOne('/users');
- expect(req.request.method).toEqual('GET');
-
- // Complete the request after a tiny delay
- setTimeout(() => {
- req.flush({});
- }, 200);
- });
-
- it('should NOT start the progress bar when ignoreProgressBar is set in request header', () => {
- const progressRef: NgProgressRef = ngProgress.ref();
- spyOn(progressRef, 'start');
-
- const headers = new HttpHeaders({ ignoreProgressBar: '' });
- httpClient.get('/users', { headers }).subscribe();
- expect(progressRef.start).not.toHaveBeenCalled();
-
- const req = httpTestingController.expectOne('/users');
-
- req.flush({});
- });
-
- afterEach(() => {
- httpTestingController.verify();
- });
-});
-
-describe(`NgProgressHttp with custom id and silentApis`, () => {
- let ngProgress: NgProgress;
- let httpClient: HttpClient;
- let httpTestingController: HttpTestingController;
-
- const url1: string = 'https://domain.com/silent/123';
- const url2: string = 'https://domain.com/another-path/xxx';
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [
- NgProgressModule,
- NgProgressHttpModule,
- NgProgressHttpModule.withConfig({
- id: CUSTOM_PROGRESS_ID,
- silentApis: ['/silent', '/another-path']
- }),
- HttpClientTestingModule
- ]
- });
-
- ngProgress = TestBed.inject(NgProgress);
- httpClient = TestBed.inject(HttpClient);
- httpTestingController = TestBed.inject(HttpTestingController);
- });
-
- it('should NOT start the progress bar if the requests are defined in silentApis', () => {
- const progressRef: NgProgressRef = ngProgress.ref(CUSTOM_PROGRESS_ID);
- spyOn(progressRef, 'start');
-
- httpClient.get(url1).subscribe();
- httpClient.get(url2).subscribe();
- expect(progressRef.start).not.toHaveBeenCalled();
-
- const req1 = httpTestingController.expectOne(url1);
- const req2 = httpTestingController.expectOne(url2);
-
- req1.flush({});
- req2.flush({});
- });
-});
-
-describe(`NgProgressHttp with matcher`, () => {
- let ngProgress: NgProgress;
- let httpClient: HttpClient;
- let httpTestingController: HttpTestingController;
-
- const url1: string = 'https://www.api.domain.com/places';
- const url2: string = 'https://preprod.domain.com/user';
- const url3: string = 'https://domain.com/reviews/v1/test';
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [
- NgProgressModule,
- NgProgressHttpModule,
- NgProgressHttpModule.withConfig({
- matcher: `https?:\\/\\/(\\S*\\.)?domain\\.com`
- }),
- HttpClientTestingModule
- ]
- });
-
- ngProgress = TestBed.inject(NgProgress);
- httpClient = TestBed.inject(HttpClient);
- httpTestingController = TestBed.inject(HttpTestingController);
- });
-
- it('should NOT start the progress bar if the requests are defined in matcher', () => {
- const progressRef: NgProgressRef = ngProgress.ref();
- spyOn(progressRef, 'start');
-
- httpClient.get(url1).subscribe();
- httpClient.get(url2).subscribe();
- httpClient.get(url3).subscribe();
- expect(progressRef.start).not.toHaveBeenCalled();
-
- const req1 = httpTestingController.expectOne(url1);
- const req2 = httpTestingController.expectOne(url2);
- const req3 = httpTestingController.expectOne(url3);
-
- req1.flush({});
- req2.flush({});
- req3.flush({});
- });
-});
-
-describe(`NgProgressHttp with matcher + silentApis`, () => {
- let ngProgress: NgProgress;
- let httpClient: HttpClient;
- let httpTestingController: HttpTestingController;
-
- const url1: string = 'https://www.api.domain.com/places';
- const url2: string = 'https://preprod.domain.com/user';
- const url3: string = 'https://domain.com/reviews/v1/test';
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [
- NgProgressModule,
- NgProgressHttpModule,
- NgProgressHttpModule.withConfig({
- silentApis: ['/user', '/reviews'],
- matcher: `https?:\\/\\/(\\S*\\.)?domain\\.com`
- }),
- HttpClientTestingModule
- ]
- });
-
- ngProgress = TestBed.inject(NgProgress);
- httpClient = TestBed.inject(HttpClient);
- httpTestingController = TestBed.inject(HttpTestingController);
- });
-
- it('should NOT start the progress bar if the requests are defined in matcher', () => {
- const progressRef: NgProgressRef = ngProgress.ref();
- spyOn(progressRef, 'start');
-
- httpClient.get(url1).subscribe();
- httpClient.get(url2).subscribe();
- httpClient.get(url3).subscribe();
- expect(progressRef.start).toHaveBeenCalledTimes(1);
-
- const req1 = httpTestingController.expectOne(url1);
- const req2 = httpTestingController.expectOne(url2);
- const req3 = httpTestingController.expectOne(url3);
-
- req1.flush({});
- req2.flush({});
- req3.flush({});
- });
-});
diff --git a/projects/ngx-progressbar/src/lib/ng-progress.interface.ts b/projects/ngx-progressbar/src/lib/ng-progress.interface.ts
deleted file mode 100644
index 2205ff1..0000000
--- a/projects/ngx-progressbar/src/lib/ng-progress.interface.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export interface ProgressState {
- active: boolean;
- value: number;
-}
-
-export interface ProgressConfig {
- spinnerPosition: 'left' | 'right';
- direction: 'ltr+' | 'ltr-' | 'rtl+' | 'rtl-';
- ease: string;
- color: string;
- thick: boolean;
- fixed: boolean;
- meteor: boolean;
- spinner: boolean;
- max: number;
- min: number;
- speed: number;
- trickleSpeed: number;
- trickleFunc: (n: number) => number;
- debounceTime: number;
-}
-
-export type NgProgressState = Partial;
-
-export type NgProgressConfig = Partial;
-
-export const NG_PROGRESS_CONFIG = new InjectionToken('ngProgressConfig');
diff --git a/projects/ngx-progressbar/src/lib/ng-progress.model.ts b/projects/ngx-progressbar/src/lib/ng-progress.model.ts
new file mode 100644
index 0000000..02c490d
--- /dev/null
+++ b/projects/ngx-progressbar/src/lib/ng-progress.model.ts
@@ -0,0 +1,28 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { defaultOptions } from './ng-progress-default';
+
+export interface NgProgressOptions {
+ spinnerPosition?: 'left' | 'right';
+ direction?: 'ltr+' | 'ltr-' | 'rtl+' | 'rtl-';
+ relative?: boolean;
+ flat?: boolean;
+ spinner?: boolean;
+ max?: number;
+ min?: number;
+ speed?: number;
+ trickleSpeed?: number;
+ trickleFunc?: (n: number) => number;
+ debounceTime?: number;
+}
+
+export const NG_PROGRESS_OPTIONS: InjectionToken = new InjectionToken('NG_PROGRESS_OPTIONS', {
+ providedIn: 'root',
+ factory: () => defaultOptions
+});
+
+export function provideNgProgressOptions(options: NgProgressOptions): Provider {
+ return {
+ provide: NG_PROGRESS_OPTIONS,
+ useValue: { ...defaultOptions, ...options }
+ };
+}
diff --git a/projects/ngx-progressbar/src/lib/ng-progress.module.ts b/projects/ngx-progressbar/src/lib/ng-progress.module.ts
deleted file mode 100644
index 2dd6f4f..0000000
--- a/projects/ngx-progressbar/src/lib/ng-progress.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { NgProgressComponent } from './ng-progress.component';
-import { NG_PROGRESS_CONFIG, NgProgressConfig } from './ng-progress.interface';
-
-@NgModule({
- exports: [NgProgressComponent],
- imports: [NgProgressComponent]
-})
-export class NgProgressModule {
- static withConfig(config: NgProgressConfig): ModuleWithProviders {
- return {
- ngModule: NgProgressModule,
- providers: [
- { provide: NG_PROGRESS_CONFIG, useValue: config }
- ]
- };
- }
-}
diff --git a/projects/ngx-progressbar/src/lib/ng-progress.service.ts b/projects/ngx-progressbar/src/lib/ng-progress.service.ts
deleted file mode 100644
index 946ee9a..0000000
--- a/projects/ngx-progressbar/src/lib/ng-progress.service.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Injectable, Inject, Optional } from '@angular/core';
-import { NgProgressRef } from './ng-progress-ref';
-import { NgProgressConfig, ProgressConfig, NG_PROGRESS_CONFIG } from './ng-progress.interface';
-
-const defaultConfig: ProgressConfig = {
- min: 8,
- max: 100,
- speed: 200,
- debounceTime: 0,
- trickleSpeed: 300,
- fixed: true,
- meteor: true,
- thick: false,
- spinner: true,
- ease: 'linear',
- color: '#1B95E0',
- direction: 'ltr+',
- spinnerPosition: 'right',
- trickleFunc: (n: number): number => {
- if (n >= 0 && n < 20) return 10;
- if (n >= 20 && n < 50) return 4;
- if (n >= 50 && n < 80) return 2;
- if (n >= 80 && n < 99) return 0.5;
- return 0;
- }
-};
-
-@Injectable({
- providedIn: 'root'
-})
-export class NgProgress {
-
- // Store progress bar instances
- private readonly _instances: Map = new Map();
-
- // Global config
- config: ProgressConfig;
-
- constructor(@Optional() @Inject(NG_PROGRESS_CONFIG) config: NgProgressConfig) {
- this.config = config ? { ...defaultConfig, ...config } : defaultConfig;
- }
-
- /**
- * Get or Create progress bar by ID
- */
- ref(id: string = 'root', config?: NgProgressConfig): NgProgressRef {
- if (this._instances.has(id)) {
- // Get ProgressRef instance
- const progressRef: NgProgressRef = this._instances.get(id)!;
- if (config) {
- progressRef.setConfig({ ...this.config, ...config });
- }
- return progressRef as NgProgressRef;
- } else {
- // Create new ProgressRef instance
- const progressRef: NgProgressRef = new NgProgressRef({ ...this.config, ...config }, this.deleteInstance(id));
- return this._instances.set(id, progressRef).get(id) as NgProgressRef;
- }
- }
-
- /**
- * Destroy all progress bar instances
- */
- destroyAll(): void {
- this._instances.forEach((ref: NgProgressRef) => ref.destroy());
- }
-
- /**
- * A destroyer function for each progress bar instance
- */
- private deleteInstance(id: string): () => void {
- return () => {
- this._instances.delete(id);
- };
- }
-}
diff --git a/projects/ngx-progressbar/src/lib/tests/ng-progress-http.spec.ts b/projects/ngx-progressbar/src/lib/tests/ng-progress-http.spec.ts
new file mode 100644
index 0000000..63dd53d
--- /dev/null
+++ b/projects/ngx-progressbar/src/lib/tests/ng-progress-http.spec.ts
@@ -0,0 +1,194 @@
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpTestingController, provideHttpClientTesting, TestRequest } from '@angular/common/http/testing';
+import { HttpClient, HttpHeaders, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { NgProgressbar, NgProgressRef } from 'ngx-progressbar';
+import { NG_PROGRESS_HTTP_OPTIONS, NgProgressHttp, progressInterceptor } from 'ngx-progressbar/http';
+
+@Component({
+ standalone: true,
+ template: `
+
+ `,
+ imports: [NgProgressbar, NgProgressHttp]
+})
+class TestComponent {
+}
+
+describe(`NgProgressHttp`, () => {
+ let fixture: ComponentFixture;
+ let progressRef: NgProgressRef;
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [TestComponent, NgProgressHttp],
+ providers: [
+ provideHttpClient(
+ withInterceptors([progressInterceptor]),
+ ),
+ provideHttpClientTesting()
+ ]
+ });
+ });
+
+ it('should start the progress bar with http request', (done: DoneFn) => {
+ fixture = TestBed.createComponent(TestComponent);
+ progressRef = fixture.debugElement.query(By.directive(NgProgressRef)).injector.get(NgProgressRef);
+ httpClient = TestBed.inject(HttpClient);
+ httpTestingController = TestBed.inject(HttpTestingController);
+
+ const startSpy: jasmine.Spy = spyOn(progressRef, 'start');
+ const completeSpy: jasmine.Spy = spyOn(progressRef, 'complete');
+
+ httpClient.get('/users').subscribe(() => {
+ // Check that progress.complete() has been called after the request is completed
+ // Need to check that async
+ setTimeout(() => {
+ expect(completeSpy).toHaveBeenCalled();
+ done();
+ });
+ });
+
+ fixture.detectChanges();
+
+ // Check that progress.start() has been called
+ expect(startSpy).toHaveBeenCalled();
+
+ const req: TestRequest = httpTestingController.expectOne('/users');
+ expect(req.request.method).toEqual('GET');
+
+ // Complete the request after a tiny delay
+ setTimeout(() => {
+ req.flush({});
+ }, 200);
+ });
+
+ it('should NOT start the progress bar when ignoreProgressBar is set in request header', () => {
+ fixture = TestBed.createComponent(TestComponent);
+ progressRef = fixture.debugElement.query(By.directive(NgProgressRef)).injector.get(NgProgressRef);
+ httpClient = TestBed.inject(HttpClient);
+ httpTestingController = TestBed.inject(HttpTestingController);
+
+ const startSpy: jasmine.Spy = spyOn(progressRef, 'start');
+
+ const headers: HttpHeaders = new HttpHeaders({ ignoreProgressBar: '' });
+ httpClient.get('/users', { headers }).subscribe();
+
+ fixture.detectChanges();
+
+ expect(startSpy).not.toHaveBeenCalled();
+
+ const req: TestRequest = httpTestingController.expectOne('/users');
+
+ req.flush({});
+ });
+
+ it('should NOT start the progress bar if the requests are defined in silentApis', () => {
+ TestBed.overrideProvider(NG_PROGRESS_HTTP_OPTIONS, {
+ useValue: {
+ silentApis: ['/silent', '/another-path']
+ }
+ });
+
+ fixture = TestBed.createComponent(TestComponent);
+ progressRef = fixture.debugElement.query(By.directive(NgProgressRef)).injector.get(NgProgressRef);
+ httpClient = TestBed.inject(HttpClient);
+ httpTestingController = TestBed.inject(HttpTestingController);
+
+ const url1: string = 'https://domain.com/silent/123';
+ const url2: string = 'https://domain.com/another-path/xxx';
+
+ const startSpy: jasmine.Spy = spyOn(progressRef, 'start');
+
+ httpClient.get(url1).subscribe();
+ fixture.detectChanges();
+ httpClient.get(url2).subscribe();
+ fixture.detectChanges();
+
+ expect(startSpy).not.toHaveBeenCalled();
+
+ const req1: TestRequest = httpTestingController.expectOne(url1);
+ const req2: TestRequest = httpTestingController.expectOne(url2);
+
+ req1.flush({});
+ req2.flush({});
+ });
+
+ it('should NOT start the progress bar if the requests are defined in matcher', () => {
+ TestBed.overrideProvider(NG_PROGRESS_HTTP_OPTIONS, {
+ useValue: {
+ matcher: `https?:\\/\\/(\\S*\\.)?domain\\.com`
+ }
+ });
+ fixture = TestBed.createComponent(TestComponent);
+ progressRef = fixture.debugElement.query(By.directive(NgProgressRef)).injector.get(NgProgressRef);
+ httpClient = TestBed.inject(HttpClient);
+ httpTestingController = TestBed.inject(HttpTestingController);
+
+ const url1: string = 'https://www.api.domain.com/places';
+ const url2: string = 'https://preprod.domain.com/user';
+ const url3: string = 'https://domain.com/reviews/v1/test';
+
+ const startSpy: jasmine.Spy = spyOn(progressRef, 'start');
+
+ httpClient.get(url1).subscribe();
+ fixture.detectChanges();
+ httpClient.get(url2).subscribe();
+ fixture.detectChanges();
+ httpClient.get(url3).subscribe();
+ fixture.detectChanges();
+
+ expect(startSpy).not.toHaveBeenCalled();
+
+ const req1: TestRequest = httpTestingController.expectOne(url1);
+ const req2: TestRequest = httpTestingController.expectOne(url2);
+ const req3: TestRequest = httpTestingController.expectOne(url3);
+
+ req1.flush({});
+ req2.flush({});
+ req3.flush({});
+ });
+
+ it('should NOT start the progress bar if the requests are defined in silentApis or matcher', () => {
+ TestBed.overrideProvider(NG_PROGRESS_HTTP_OPTIONS, {
+ useValue: {
+ silentApis: ['/user', '/reviews'],
+ matcher: `https?:\\/\\/(\\S*\\.)?domain\\.com`
+ }
+ });
+ fixture = TestBed.createComponent(TestComponent);
+ progressRef = fixture.debugElement.query(By.directive(NgProgressRef)).injector.get(NgProgressRef);
+ httpClient = TestBed.inject(HttpClient);
+ httpTestingController = TestBed.inject(HttpTestingController);
+
+ const url1: string = 'https://www.api.domain.com/places';
+ const url2: string = 'https://preprod.domain.com/user';
+ const url3: string = 'https://domain.com/reviews/v1/test';
+
+ const startSpy: jasmine.Spy = spyOn(progressRef, 'start');
+
+ httpClient.get(url1).subscribe();
+ fixture.detectChanges();
+ httpClient.get(url2).subscribe();
+ fixture.detectChanges();
+ httpClient.get(url3).subscribe();
+ fixture.detectChanges();
+
+ expect(startSpy).toHaveBeenCalledTimes(1);
+
+ const req1: TestRequest = httpTestingController.expectOne(url1);
+ const req2: TestRequest = httpTestingController.expectOne(url2);
+ const req3: TestRequest = httpTestingController.expectOne(url3);
+
+ req1.flush({});
+ req2.flush({});
+ req3.flush({});
+ });
+
+ afterEach(() => {
+ httpTestingController.verify();
+ });
+});
diff --git a/projects/ngx-progressbar/src/lib/tests/ng-progress-ref.spec.ts b/projects/ngx-progressbar/src/lib/tests/ng-progress-ref.spec.ts
new file mode 100644
index 0000000..43c65b4
--- /dev/null
+++ b/projects/ngx-progressbar/src/lib/tests/ng-progress-ref.spec.ts
@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NgProgressOptions, NgProgressRef } from 'ngx-progressbar';
+import { defaultOptions } from '../ng-progress-default';
+
+export async function afterTimeout(timeout: number): Promise {
+ // Use await with a setTimeout promise
+ await new Promise((resolve) => setTimeout(resolve, timeout));
+}
+
+describe('NgProgressRef', () => {
+ let directive: NgProgressRef;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [TestComponent]
+ });
+
+ fixture = TestBed.createComponent(TestComponent);
+ directive = fixture.debugElement.query(By.directive(NgProgressRef)).injector.get(NgProgressRef);
+ });
+
+ it('should initialize with the default config', () => {
+ expect(directive.config()).toEqual(defaultOptions);
+ });
+
+ it('should start and complete the progress', async () => {
+ directive.start();
+
+ fixture.detectChanges();
+ expect(directive.active()).toBeTrue();
+ expect(directive.progress()).toBe(0);
+
+ directive.inc();
+ fixture.detectChanges();
+ expect(directive.progress()).toBeGreaterThan(0);
+
+ directive.complete();
+ fixture.detectChanges();
+
+ await afterTimeout(20);
+ expect(directive.progress()).toBe(100);
+ await afterTimeout(350);
+ expect(directive.active()).toBeFalse();
+ });
+
+ it('should emit the started and completed events', async () => {
+ let startedEmitted: boolean = false;
+ let completedEmitted: boolean = false;
+
+ directive.started.subscribe(() => {
+ startedEmitted = true;
+ });
+
+ directive.completed.subscribe(() => {
+ completedEmitted = true;
+ });
+
+ directive.start();
+ expect(startedEmitted).toBeTrue();
+
+ directive.complete();
+ fixture.detectChanges();
+
+ await afterTimeout(20);
+ expect(completedEmitted).toBeTrue();
+ });
+
+ it('should update the config', () => {
+ const newConfig: NgProgressOptions = { ...defaultOptions, min: 20, max: 80 };
+ directive.setConfig(newConfig);
+ expect(directive.config()).toEqual(newConfig);
+ });
+});
+
+@Component({
+ standalone: true,
+ imports: [NgProgressRef],
+ template: `
+
+ `
+})
+class TestComponent {
+}
diff --git a/projects/ngx-progressbar/src/lib/tests/ng-progress-router.spec.ts b/projects/ngx-progressbar/src/lib/tests/ng-progress-router.spec.ts
new file mode 100644
index 0000000..fb3ef17
--- /dev/null
+++ b/projects/ngx-progressbar/src/lib/tests/ng-progress-router.spec.ts
@@ -0,0 +1,82 @@
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { provideRouter, Router } from '@angular/router';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NgProgressRef, NgProgressbar } from 'ngx-progressbar';
+import { NgProgressRouter, provideNgProgressRouter } from 'ngx-progressbar/router';
+
+const CUSTOM_PROGRESS_DELAY: number = 200;
+
+@Component({
+ standalone: true,
+ template: `
+
+ `,
+ imports: [NgProgressbar, NgProgressRouter]
+})
+class TestComponent {
+}
+
+@Component({
+ standalone: true,
+ selector: 'page-1',
+ template: ''
+})
+export class Page1 {
+}
+
+@Component({
+ standalone: true,
+ selector: 'page-2',
+ template: ''
+})
+export class Page2 {
+}
+
+describe(`NgProgressRouter`, () => {
+ let fixture: ComponentFixture;
+ let progressRef: NgProgressRef;
+ let progressRouter: NgProgressRouter;
+ let router: Router;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ TestComponent,
+ Page1,
+ Page2
+ ],
+ providers: [
+ provideRouter([
+ { path: '', component: Page1 },
+ { path: 'page2', component: Page2 }
+ ]),
+ provideNgProgressRouter({
+ minDuration: CUSTOM_PROGRESS_DELAY
+ })
+ ]
+ }).compileComponents();
+
+ router = TestBed.inject(Router);
+ fixture = TestBed.createComponent(TestComponent);
+ progressRef = fixture.debugElement.query(By.directive(NgProgressRef)).injector.get(NgProgressRef);
+ progressRouter = fixture.debugElement.query(By.directive(NgProgressRouter)).injector.get(NgProgressRouter);
+ });
+
+ it('should start/complete the progress bar on route change', (done: DoneFn) => {
+ const startSpy: jasmine.Spy = spyOn(progressRef, 'start');
+ const completeSpy: jasmine.Spy = spyOn(progressRef, 'complete');
+
+ progressRouter.ngOnInit();
+
+ router.navigate(['page2']).then(() => {
+ fixture.detectChanges();
+ setTimeout(() => {
+ expect(completeSpy).toHaveBeenCalled();
+ done();
+ }, CUSTOM_PROGRESS_DELAY);
+ });
+
+ expect(startSpy).toHaveBeenCalled();
+ });
+});
diff --git a/projects/ngx-progressbar/src/lib/tests/ng-progress.component.spec.ts b/projects/ngx-progressbar/src/lib/tests/ng-progress.component.spec.ts
new file mode 100644
index 0000000..6fad517
--- /dev/null
+++ b/projects/ngx-progressbar/src/lib/tests/ng-progress.component.spec.ts
@@ -0,0 +1,59 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NgProgressbar, NgProgressRef } from 'ngx-progressbar';
+
+describe('NgProgress Component', () => {
+ let fixture: ComponentFixture;
+ let component: NgProgressbar;
+ let progressRef: NgProgressRef;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NgProgressbar]
+ });
+
+ fixture = TestBed.createComponent(NgProgressbar);
+ component = fixture.componentInstance;
+ progressRef = component.progressRef;
+ });
+
+ it('should create a progress bar', () => {
+ expect(component).toBeDefined();
+ });
+
+ it('should start/complete the progress using the start/complete functions', (done: DoneFn) => {
+ const startSpy: jasmine.Spy = spyOn(progressRef, 'start');
+ const completeSpy: jasmine.Spy = spyOn(progressRef, 'complete');
+
+ component.start();
+ expect(startSpy).toHaveBeenCalled();
+
+ setTimeout(() => {
+ component.complete();
+ expect(completeSpy).toHaveBeenCalled();
+ done();
+ }, 200);
+ });
+
+ it('should active signal when progress is started', (done: DoneFn) => {
+ component.start();
+
+ setTimeout(() => {
+ expect(progressRef.active()).toBeTrue();
+ done();
+ }, 50);
+ });
+
+ it('should increment the progress using inc function', () => {
+ const incSpy: jasmine.Spy = spyOn(progressRef, 'inc');
+
+ component.inc(20);
+ expect(incSpy).toHaveBeenCalledWith(20);
+ });
+
+ it('should increment the progress using set function', () => {
+ const setSpy: jasmine.Spy = spyOn(progressRef, 'set');
+
+ component.set(50);
+ expect(setSpy).toHaveBeenCalledWith(50);
+ });
+});
diff --git a/projects/ngx-progressbar/src/lib/tests/ng-progress.default.spec.ts b/projects/ngx-progressbar/src/lib/tests/ng-progress.default.spec.ts
new file mode 100644
index 0000000..c9bf9c5
--- /dev/null
+++ b/projects/ngx-progressbar/src/lib/tests/ng-progress.default.spec.ts
@@ -0,0 +1,37 @@
+import { Provider } from '@angular/core';
+import { NG_PROGRESS_OPTIONS, NgProgressOptions, provideNgProgressOptions } from 'ngx-progressbar';
+import { defaultOptions } from '../ng-progress-default';
+
+describe('NgProgressbar Options', () => {
+ it('[Default trickle function] should return the expected value based on the input', () => {
+ expect(defaultOptions.trickleFunc(0)).toBe(10);
+ expect(defaultOptions.trickleFunc(10)).toBe(10);
+ expect(defaultOptions.trickleFunc(19)).toBe(10);
+ expect(defaultOptions.trickleFunc(20)).toBe(4);
+ expect(defaultOptions.trickleFunc(30)).toBe(4);
+ expect(defaultOptions.trickleFunc(49)).toBe(4);
+ expect(defaultOptions.trickleFunc(50)).toBe(2);
+ expect(defaultOptions.trickleFunc(60)).toBe(2);
+ expect(defaultOptions.trickleFunc(79)).toBe(2);
+ expect(defaultOptions.trickleFunc(80)).toBe(0.5);
+ expect(defaultOptions.trickleFunc(90)).toBe(0.5);
+ expect(defaultOptions.trickleFunc(98)).toBe(0.5);
+ expect(defaultOptions.trickleFunc(99)).toBe(0);
+ expect(defaultOptions.trickleFunc(100)).toBe(0);
+ });
+
+ it('should return a Provider', () => {
+ const config: NgProgressOptions = {
+ min: 10,
+ max: 100,
+ // other options...
+ };
+
+ const provider: Provider = provideNgProgressOptions(config);
+ expect(provider).toEqual({
+ provide: NG_PROGRESS_OPTIONS,
+ useValue: { ...defaultOptions, ...config },
+ });
+ });
+});
+
diff --git a/projects/ngx-progressbar/src/public-api.ts b/projects/ngx-progressbar/src/public-api.ts
index 1ae5a01..4751163 100644
--- a/projects/ngx-progressbar/src/public-api.ts
+++ b/projects/ngx-progressbar/src/public-api.ts
@@ -4,6 +4,4 @@
export * from './lib/ng-progress-ref';
export * from './lib/ng-progress.component';
-export * from './lib/ng-progress.module';
-export * from './lib/ng-progress.service';
-export * from './lib/ng-progress.interface';
+export * from './lib/ng-progress.model';
diff --git a/projects/ngx-progressbar/tsconfig.lib.json b/projects/ngx-progressbar/tsconfig.lib.json
index 913e667..42431db 100644
--- a/projects/ngx-progressbar/tsconfig.lib.json
+++ b/projects/ngx-progressbar/tsconfig.lib.json
@@ -10,7 +10,7 @@
"dom",
"es2018"
],
- "strict": true
+ "strict": false
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
diff --git a/tsconfig.json b/tsconfig.json
index 7d0530a..ac52c4d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,8 +4,8 @@
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
+ "esModuleInterop": true,
"declaration": false,
- "downlevelIteration": true,
"experimentalDecorators": true,
"module": "es2020",
"moduleResolution": "node",
diff --git a/projects/ngx-progressbar-demo/src/app/header/header.component.scss b/projects/ngx-progressbar-demo/src/app/header/header.component.scss
index 5cafe17..8c1e3d0 100644
--- a/projects/ngx-progressbar-demo/src/app/header/header.component.scss
+++ b/projects/ngx-progressbar-demo/src/app/header/header.component.scss
@@ -1,5 +1,3 @@
-@import '../../assets/variables';
-
:host {
flex: 0 0 220px;
display: flex;
@@ -18,7 +16,7 @@
.title {
padding-top: 30px;
.angular {
- color: $btnHoverColor;
+ color: var(--btn-hover-color);
}
}
diff --git a/projects/ngx-progressbar-demo/src/app/header/header.component.ts b/projects/ngx-progressbar-demo/src/app/header/header.component.ts
index 37fc9e8..6541eea 100644
--- a/projects/ngx-progressbar-demo/src/app/header/header.component.ts
+++ b/projects/ngx-progressbar-demo/src/app/header/header.component.ts
@@ -1,11 +1,11 @@
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
+ standalone: true,
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: true
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderComponent {
}
diff --git a/projects/ngx-progressbar-demo/src/app/home/home.component.html b/projects/ngx-progressbar-demo/src/app/home/home.component.html
index 2f1fb62..edc4f19 100644
--- a/projects/ngx-progressbar-demo/src/app/home/home.component.html
+++ b/projects/ngx-progressbar-demo/src/app/home/home.component.html
@@ -1,12 +1,18 @@