Add LoadingWriter and LoadingReader

projects/ngsuite/src/lib/core/components/loading/animation/animation.component.html

@@ -1,13 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
   <radialGradient id="a4" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)">
-    <stop offset="0" stop-color="#333333"></stop>
-    <stop offset=".3" stop-color="#333333" stop-opacity=".9"></stop>
-    <stop offset=".6" stop-color="#333333" stop-opacity=".6"></stop>
-    <stop offset=".8" stop-color="#333333" stop-opacity=".3"></stop>
-    <stop offset="1" stop-color="#333333" stop-opacity="0"></stop>
+    <stop offset="0" stop-color="#FFFFFF"></stop>
+    <stop offset=".3" stop-color="#FFFFFF" stop-opacity=".9"></stop>
+    <stop offset=".6" stop-color="#FFFFFF" stop-opacity=".6"></stop>
+    <stop offset=".8" stop-color="#FFFFFF" stop-opacity=".3"></stop>
+    <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"></stop>
   </radialGradient>
   <circle transform-origin="center" fill="none" stroke="url(#a4)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70">
     <animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="5" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform>
   </circle>
-  <circle transform-origin="center" fill="none" opacity=".2" stroke="#333333" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle>
+  <circle transform-origin="center" fill="none" opacity=".2" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle>
 </svg>

projects/ngsuite/src/lib/core/components/loading/animation/animation.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { LoadingReader } from '../../../services';
 
 @Component({
   selector: 'ngs-loading-animation',
@@ -7,6 +8,8 @@ import { Component } from '@angular/core';
 })
 export class NGSuiteLoadingAnimationComponent {
 
-  constructor() {  }
+  constructor(
+    private reader: LoadingReader
+  ) {  }
 
 }

projects/ngsuite/src/lib/core/components/loading/page/page.component.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ComponentRef, Inject, Injector, Input, ViewChild, ViewContainerRef } from "@angular/core";
 import { NGSuiteConfig } from "../../../interfaces";
 import { NGSuiteLoadingAnimationComponent } from "../animation/animation.component";
+import { LoadingReader, LoadingWriter } from "../../../services";
 
 @Component({
   selector: 'ngs-loading-page',
@@ -11,6 +12,14 @@ export class NGSuiteLoadingPageComponent implements AfterViewInit {
 
   private componentRef?: ComponentRef<any>;
 
+  private writer: LoadingWriter;
+
+  @Input('text') set text(value: string) { this.writer.text.next(value); }
+  get text() { return this.writer.text.value; }
+
+  @Input('counter') set counter(value: number) { this.writer.counter.next(value); }
+  get counter() { return this.writer.counter.value; }
+
   @ViewChild('container', {
     read: ViewContainerRef
   }) viewContainerRef?: ViewContainerRef;
@@ -19,17 +28,21 @@ export class NGSuiteLoadingPageComponent implements AfterViewInit {
     private injector: Injector,
     private cd: ChangeDetectorRef,
     @Inject('NGSuite') private config: NGSuiteConfig
-  ) {  }
+  ) {
+    this.writer = new LoadingWriter();
+  }
 
   ngAfterViewInit() {
-    const { viewContainerRef, config, cd } = this;
+    const { writer, viewContainerRef, config, cd } = this;
 
     if (viewContainerRef) {
       const animation = config.pageLoadingAnimation || config.loadingAnimation || NGSuiteLoadingAnimationComponent;
 
       const newInjector = Injector.create({
         parent: this.injector,
-        providers: []
+        providers: [
+          { provide: LoadingReader, useValue: new LoadingReader(writer) }
+        ]
       });
 
       this.componentRef = viewContainerRef.createComponent(animation, {

projects/ngsuite/src/lib/core/components/loading/root/root.component.html

@@ -1 +1,5 @@
-<ngs-loading-page [attr.data-visible]="visible"></ngs-loading-page>
+<ngs-loading-page
+  [text]="text"
+  [counter]="instances"
+  [attr.data-visible]="visible"
+></ngs-loading-page>

projects/ngsuite/src/lib/core/components/loading/root/root.component.ts

@@ -21,13 +21,8 @@ export class NGSuiteLoadingRootComponent {
   }
 
   stop() {
-    if (!this.instances) return;
-
-    this.instances--;
-
-    if (!this.instances) {
-      //
-    }
+    this.instances = Math.max(--this.instances, 0);
+    if (!this.instances) this.text = '';
   }
 
 }

projects/ngsuite/src/lib/core/services/LoadingReader.ts

@@ -0,0 +1,14 @@
+import { Observable } from "rxjs";
+import { LoadingWriter } from "./LoadingWriter";
+
+export class LoadingReader {
+
+  readonly text: Observable<string>;
+  readonly counter: Observable<number>;
+
+  constructor(writer: LoadingWriter) {
+    this.text = writer.text.asObservable();
+    this.counter = writer.counter.asObservable();
+  }
+
+}

projects/ngsuite/src/lib/core/services/LoadingWriter.ts

@@ -0,0 +1,13 @@
+import { BehaviorSubject } from "rxjs";
+
+export class LoadingWriter {
+
+  readonly text: BehaviorSubject<string>;
+  readonly counter: BehaviorSubject<number>;
+
+  constructor() {
+    this.text = new BehaviorSubject('');
+    this.counter = new BehaviorSubject(0);
+  }
+
+}

projects/ngsuite/src/lib/core/services/index.ts

@@ -1,2 +1,4 @@
 export * from './Loading';
+export * from './LoadingWriter';
+export * from './LoadingReader';
 export * from './RouteLoading';