feat(customization): add more options for library customization

kKen94 · Nov 17, 2019 · fa18f17 · fa18f17
1 parent d5a585a
commit fa18f17
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 16 deletions.
diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
@@ -1,11 +1,11 @@
-<ngx-progress></ngx-progress>
+<ngx-progress [showSpinner]="true"></ngx-progress>
 
 <div>
   <div style="text-align: center; margin-bottom: 5%; padding-top: 10px;">Overlay test</div>
   <div class="auth-height" fxLayout="column" fxLayoutAlign="center center">
 
     <div class="border-box">
-      <ngx-progress [heigth]="'2px'"></ngx-progress>
+      <ngx-progress [height]="'2px'"></ngx-progress>
       <router-outlet></router-outlet>
     </div>
 

diff --git a/projects/lib/src/lib/ngx-progress.component.html b/projects/lib/src/lib/ngx-progress.component.html
@@ -1,10 +1,12 @@
 <ng-container *ngIf="show">
   <div class="overlay" *ngIf="progressService.isStarted && overlay"></div>
   <ngx-vendor-bar
-    [includeSpinner]="spinner"
-    [height]="heigth"
+    [includeSpinner]="showSpinner"
+    [includeBar]="showBar"
+    [height]="height"
     [color]="barColor"
     [diameter]="spinnerDiameter"
     [value]="initialValue"
+    [spinnerSpeed]="spinnerSpeed"
   ></ngx-vendor-bar>
 </ng-container>
diff --git a/projects/lib/src/lib/ngx-progress.component.ts b/projects/lib/src/lib/ngx-progress.component.ts
@@ -14,19 +14,23 @@ export class NgxProgressComponent implements OnInit, OnDestroy {
    */
   @Input() barColor = '#0984e3';
   /**
-   * Show and hide the circle spinner
+   * Show and hide circle spinner
    */
-  @Input() spinner = false;
+  @Input() showSpinner = false;
   /**
-   * Heigth of progress bar
-   * Default heigth style attributes format ('1px', '1%', ...)
+   * Show and hide progress bar
    */
-  @Input() heigth = '1px';
+  @Input() showBar = true;
+  /**
+   * Height of progress bar
+   * Default height style attributes format ('1px', '1%', ...)
+   */
+  @Input() height = '1px';
   /**
    * Width of spinner
    * Default width style attributes format ('5px', '5%', ...)
    */
-  @Input() spinnerDiameter = '5px';
+  @Input() spinnerDiameter = '10px';
   /**
    * The starting value of progress bar (from 1 to 100)
    */
@@ -35,6 +39,10 @@ export class NgxProgressComponent implements OnInit, OnDestroy {
    * Show or hide overlay
    */
   @Input() overlay = true;
+  /**
+   * Set spinner speed, from 1 to 10
+   */
+  @Input() spinnerSpeed: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 = 4;
 
   show = true;
 

diff --git a/projects/lib/src/lib/vendor-component/vendor.component.html b/projects/lib/src/lib/vendor-component/vendor.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="(value ? value : loader.progress$|async) as progress">
-  <div id="loading-bar-spinner" *ngIf="includeSpinner" [style.color]="color">
-    <div [style.width]="diameter" [style.height]="diameter" class="spinner-icon"></div>
+  <div id="loading-bar-spinner" *ngIf="includeSpinner" [style.color]="color" style="padding-left: 5px;">
+    <div [style.width]="diameter" [style.height]="diameter" class="spinner-icon" [style.animation-duration]="1000/spinnerSpeed+'ms'"></div>
   </div>
   <div id="loading-bar" *ngIf="includeBar" [style.color]="color">
     <div class="bar" [style.background]="color" [style.height]="height" [style.width]="progress + '%'">

diff --git a/projects/lib/src/lib/vendor-component/vendor.component.ts b/projects/lib/src/lib/vendor-component/vendor.component.ts
@@ -1,20 +1,19 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { VendorService } from './vendor.service';
 
 @Component({
   selector: 'ngx-vendor-bar',
   templateUrl: './vendor.component.html',
-  preserveWhitespaces: false,
-  encapsulation: ViewEncapsulation.Emulated,
   styleUrls: ['./vendor.component.scss'],
 })
 export class VendorComponent {
   @Input() includeSpinner: boolean;
-  @Input() includeBar = true;
+  @Input() includeBar: boolean;
   @Input() color: string;
   @Input() height: string;
   @Input() diameter: string;
   @Input() value: number;
+  @Input() spinnerSpeed: number;
 
   constructor(public loader: VendorService) {}
 }