feat: add getLoading pipe

Author: riccardoperra

docs/docs/pipes/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Pipes",
+  "position": 5
+}

docs/docs/pipes/get-loading.md

@@ -0,0 +1,58 @@
+---
+sidebar_position: 1
+---
+
+# getLoading
+
+Returns a boolean observable which will emit a new value once the state of the given properties of the store
+changes.
+
+## API
+
+```ts
+import { Observable } from 'rxjs';
+import { LoadingStore, LoadingStoreState } from 'ngx-reactive-loading';
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({ name: 'getLoading' })
+export interface GetLoading implements PipeTransform {
+  transform<T extends PropertyKey>(
+    value: LoadingStore<T[]>,
+    properties: T[] | T
+  ): Observable<boolean>;
+
+  transform<T extends PropertyKey>(
+    value: LoadingRegistry<T>,
+    properties: T | T[]
+  ): Observable<boolean>;
+
+  transform<T extends PropertyKey>(
+    value: LoadingStore<T[]> | LoadingRegistry<T>,
+    properties: T | T[]
+  ): Observable<boolean>;
+}
+```
+
+- `value` - The loading store or loading registry
+- `properties` - The properties of the given store or registry that will be listened
+
+## Example
+
+```ts
+import { Component, OnInit } from '@angular/core';
+import { LoadingRegistry } from 'ngx-reactive-loading';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <ng-container *ngIf="loadingRegistry | getLoading: 'key' | async">
+      Key is loading...
+    </ng-container>
+  `
+})
+
+export class ExampleComponent implements OnInit {
+  constructor(readonly loadingRegistry: LoadingRegistry) {
+  }
+}
+```

projects/ngx-reactive-loading/src/lib/pipes/get-loading.pipe.ts

@@ -0,0 +1,30 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Observable } from 'rxjs';
+import { isLoadingStore, LoadingStore } from '../core/create-loading-store';
+import { LoadingRegistry, PropertyTuple } from '../model';
+import { someLoading } from '../utils';
+
+@Pipe({
+  name: 'getLoading',
+})
+export class GetLoadingPipe implements PipeTransform {
+  transform<T extends PropertyKey>(
+    value: LoadingStore<PropertyTuple<T>>,
+    properties: PropertyTuple<T> | T
+  ): Observable<boolean>;
+  transform<T extends PropertyKey>(
+    value: LoadingRegistry<T>,
+    properties: T | PropertyTuple<T>
+  ): Observable<boolean>;
+  transform<T extends PropertyKey>(
+    value: LoadingStore<PropertyTuple<T>> | LoadingRegistry<T>,
+    properties: T | PropertyTuple<T>
+  ): Observable<boolean> {
+    const keys = Array.isArray(properties) ? properties : [properties];
+    if (isLoadingStore(value)) {
+      return someLoading(keys.map(key => value[key as T].$));
+    } else {
+      return value.someLoading(keys);
+    }
+  }
+}

projects/ngx-reactive-loading/src/lib/reactive-loading.module.ts

@@ -25,6 +25,7 @@ import {
 import { LoggerService } from './services/logger.service';
 import { LoadingDirective } from './components/loading.directive';
 import { LoadingStore } from './core';
+import { GetLoadingPipe } from './pipes/get-loading.pipe';
 
 /**
  * @internal
@@ -39,8 +40,8 @@ export class RootReactiveLoadingModule {
 }
 
 @NgModule({
-  declarations: [LoadingDirective],
-  exports: [LoadingDirective],
+  declarations: [LoadingDirective, GetLoadingPipe],
+  exports: [LoadingDirective, GetLoadingPipe],
 })
 export class ReactiveLoadingModule {
   static forRoot<T extends PropertyKey>(

projects/ngx-reactive-loading/src/public-api.ts

@@ -14,6 +14,7 @@ export { LoadingService } from './lib/services';
 export { ReactiveLoadingModule } from './lib/reactive-loading.module';
 export { SOME_LOADING, LOADING_REGISTRY } from './lib/providers/token';
 export { LoadingDirective } from './lib/components/loading.directive';
+export { GetLoadingPipe } from './lib/pipes/get-loading.pipe';
 
 // Http Module