Refactor module to include a configuration when calling #forRoot

.gitignore

@@ -8,7 +8,7 @@
 /bazel-out
 
 # dependencies
-/node_modules
+**/node_modules
 
 # profiling files
 chrome-profiler-events.json

README.md

@@ -87,6 +87,8 @@ After that, you can use the `ngx-skeleton-loader` components in your templates,
 
 Also, you can import the module in your app by calling `NgxSkeletonLoaderModule.forRoot()` when adding it. So it will be available across your Angular application.
 
+Importing the module this way also allows you to globally configure the default values for the `ngx-skeleton-loader` components in your application.
+
 ```typescript
 ...
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -98,7 +100,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   ],
   imports: [
     ...
-    NgxSkeletonLoaderModule.forRoot(),
+    NgxSkeletonLoaderModule.forRoot({ animation: 'pulse', loadingText: 'This item is actually loading...' }),
     ...
   ],
   providers: [],
@@ -112,6 +114,7 @@ export class YourAppComponent {}
 ```html
 <div class="item">
   <ngx-skeleton-loader count="5" appearance="circle"></ngx-skeleton-loader>
+  <!-- above line will produce the rendering of 5 circles with the pulse animation and the aria-valuetext attribute set with "This item is actually loading..." -->
 </div>
 ```
 
@@ -125,7 +128,8 @@ You can also define which appearance want to use in your skeleton loader by pass
 
 ### Options
 
-- `''` - _default_: it will use it `''` as appearance. At the end, it will render like a line, but line is not a expected appearance to be passed;
+- `''` - _default_: it will use it `''` as appearance. At the end, it will render like a line;
+- `'line'`: it will render like a line. This is the same behavior than passing an empty string;
 - `circle`: it will use `circle` as appearance. Great for avatar skeletons, for example :);
 
 ## Animations

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader-config.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NgxSkeletonLoaderConfigService } from './ngx-skeleton-loader-config.service';
+
+describe('NgxSkeletonLoaderConfigService', () => {
+  let service: NgxSkeletonLoaderConfigService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NgxSkeletonLoaderConfigService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader-config.service.ts

@@ -0,0 +1,19 @@
+import { Inject, Injectable, Optional } from '@angular/core';
+import {
+  DEFAULT_NGX_SKELETON_LOADER_CONFIG,
+  NgxSkeletonLoaderConfig,
+  NGX_SKELETON_LOADER_CONFIG,
+} from './ngx-skeleton-loader-config.types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NgxSkeletonLoaderConfigService {
+  readonly config: NgxSkeletonLoaderConfig = DEFAULT_NGX_SKELETON_LOADER_CONFIG;
+
+  constructor(@Inject(NGX_SKELETON_LOADER_CONFIG) @Optional() config: NgxSkeletonLoaderConfig) {
+    if (config) {
+      this.config = config;
+    }
+  }
+}

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader-config.types.ts

@@ -0,0 +1,24 @@
+import { InjectionToken } from '@angular/core';
+
+export interface NgxSkeletonLoaderConfig {
+  appearance?: 'circle' | 'line' | '';
+  animation?: 'progress' | 'progress-dark' | 'pulse' | 'false' | false;
+  theme?: {
+    // This is required since ngStyle is using `any` as well
+    // More details in https://angular.io/api/common/NgStyle
+    // tslint:disable-next-line: no-any
+    [k: string]: any;
+  };
+  loadingText?: string;
+  count?: number;
+}
+
+export const DEFAULT_NGX_SKELETON_LOADER_CONFIG = {
+  appearance: 'line',
+  animation: 'progress',
+  theme: {},
+  loadingText: 'Loading...',
+  count: 1,
+} as NgxSkeletonLoaderConfig;
+
+export const NGX_SKELETON_LOADER_CONFIG = new InjectionToken<NgxSkeletonLoaderConfig>('ngx-skeleton-loader.config');

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts

@@ -103,7 +103,7 @@ describe('NgxSkeletonLoaderComponent', () => {
   it('should console errors if `appearance` is an invalid option and is running in development mode', () => {
     expect(console.error).toHaveBeenCalledWith(
       // tslint:disable-next-line: max-line-length
-      `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or empty string. Forcing default to "''".`,
+      `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or line or empty string. Forcing default to "''".`,
     );
   });
 

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts

@@ -10,6 +10,8 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { start, end } from 'perf-marks/marks';
+import { NgxSkeletonLoaderConfigService } from './ngx-skeleton-loader-config.service';
+import { NgxSkeletonLoaderConfig } from './ngx-skeleton-loader-config.types';
 
 @Component({
   selector: 'ngx-skeleton-loader',
@@ -24,25 +26,25 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest
   static ngAcceptInputType_animation: boolean | string;
 
   @Input()
-  count = 1;
+  count: NgxSkeletonLoaderConfig['count'] = this.configService.config.count;
 
   @Input()
-  loadingText = 'Loading...';
+  loadingText: NgxSkeletonLoaderConfig['loadingText'] = this.configService.config.loadingText;
 
   @Input()
-  appearance: 'circle' | '' = '';
+  appearance: NgxSkeletonLoaderConfig['appearance'] = this.configService.config.appearance;
 
   @Input()
-  animation: 'progress' | 'progress-dark' | 'pulse' | 'false' | false = 'progress';
+  animation: NgxSkeletonLoaderConfig['animation'] = this.configService.config.animation;
 
-  // This is required since ngStyle is using `any` as well
-  // More details in https://angular.io/api/common/NgStyle
-  // tslint:disable-next-line: no-any
-  @Input() theme: { [k: string]: any } = {};
+  @Input()
+  theme: NgxSkeletonLoaderConfig['theme'] = this.configService.config.theme;
 
   // tslint:disable-next-line: no-any
   items: Array<any> = [];
 
+  constructor(private configService: NgxSkeletonLoaderConfigService) {}
+
   ngOnInit() {
     start('NgxSkeletonLoader:Rendered');
     start('NgxSkeletonLoader:Loaded');
@@ -61,8 +63,7 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest
       }
       this.count = 1;
     }
-
-    this.items.length = this.count;
+    this.items.length = this.count || 1;
 
     const allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
     if (allowedAnimations.indexOf(String(this.animation)) === -1) {
@@ -77,11 +78,11 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest
       this.animation = 'progress';
     }
 
-    if (['circle', ''].indexOf(String(this.appearance)) === -1) {
+    if (['circle', 'line', ''].indexOf(String(this.appearance)) === -1) {
       // Shows error message only in Development
       if (isDevMode()) {
         console.error(
-          `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or empty string. Forcing default to "''".`,
+          `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or line or empty string. Forcing default to "''".`,
         );
       }
       this.appearance = '';

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.module.ts

@@ -1,17 +1,25 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
 import { CommonModule } from '@angular/common';
 
+import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
+import {
+  DEFAULT_NGX_SKELETON_LOADER_CONFIG,
+  NgxSkeletonLoaderConfig,
+  NGX_SKELETON_LOADER_CONFIG,
+} from './ngx-skeleton-loader-config.types';
+
 @NgModule({
   declarations: [NgxSkeletonLoaderComponent],
   imports: [CommonModule],
   exports: [NgxSkeletonLoaderComponent],
 })
-
 export class NgxSkeletonLoaderModule {
-  static forRoot(): ModuleWithProviders<NgxSkeletonLoaderModule> {
+  static forRoot(
+    config: NgxSkeletonLoaderConfig = DEFAULT_NGX_SKELETON_LOADER_CONFIG,
+  ): ModuleWithProviders<NgxSkeletonLoaderModule> {
     return {
       ngModule: NgxSkeletonLoaderModule,
+      providers: [{ provide: NGX_SKELETON_LOADER_CONFIG, useValue: config }],
     };
   }
 }

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.scss

@@ -61,7 +61,7 @@
       left: 0;
       width: 200px;
       height: 100%;
-      content: '';
+      content: "";
     }
   }
 
@@ -78,12 +78,7 @@
 
   &.progress-dark {
     &:before {
-      background-image: linear-gradient(
-        90deg,
-        transparent,
-        rgba(0, 0, 0, 0.2),
-        transparent
-      );
+      background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
     }
   }
 

projects/ngx-skeleton-loader/src/public-api.ts

@@ -4,3 +4,4 @@
 
 export * from './lib/ngx-skeleton-loader.component';
 export * from './lib/ngx-skeleton-loader.module';
+export * from './lib/ngx-skeleton-loader-config.types';