Rename module

README.md

@@ -1,6 +1,6 @@
-# Angular Loadable
+# Angular Loading Customizer
 
-Angular Loadable is a library that helps you represent and show data that needs to be loaded from a backend and can therefore be in a loading state.
+Angular Loading Customizer is a library that helps you represent and show data that needs to be loaded from a backend and can therefore be in a loading state.
 
 - **Loadable type** - The type `Loadable<T>` lets you represent the full state of your loading data with a single object. No more additional booleans passed to your components.
 - **Loadable component** - The component `ld-loadable` shows your loaded data, a loading animation or an error state depending on the state of the loadable object.
@@ -42,15 +42,15 @@ const loadable$ = of({ id: 42 }).pipe(toLoadable);
 
 If you have an object of type `Loadable<T>`, you can display it with the `ld-loadable` component.
 
-First, make sure to import the `LoadableModule` in your module.
+First, make sure to import the `LoadingCustomizerModule` in your module.
 
 ```typescript
 import { NgModule } from "@angular/core";
-import { LoadableModule } from "ngx-loading-customizer";
+import { LoadingCustomizerModule } from "ngx-loading-customizer";
 import { CommonModule } from "@angular/common";
 
 @NgModule({
-  imports: [LoadableModule],
+  imports: [LoadingCustomizerModule],
 })
 export class AppModule {}
 ```
@@ -88,17 +88,17 @@ Note that this inner template is only rendered in the `loaded` state and this ex
 You can define a custom default loading animation within your application.
 Note that the way Angular providers work, these defaults are global within your lazy-loaded module.
 
-Create your custom loading animation component and pass it to the `LoadableModule`. Each `ld-loadable` component now defaults to this loading animation component.
+Create your custom loading animation component and pass it to the `LoadingCustomizerModule`. Each `ld-loadable` component now defaults to this loading animation component.
 
 ```typescript
 import { NgModule } from "@angular/core";
-import { LoadableModule } from "ngx-loading-customizer";
+import { LoadingCustomizerModule } from "ngx-loading-customizer";
 import { CustomLoadingAnimationComponent } from "./custom-loading-animation.component";
 
 @NgModule({
   declarations: [CustomLoadingAnimationComponent],
   imports: [
-    LoadableModule.forRoot({
+    LoadingCustomizerModule.forRoot({
       defaultComponents: {
         loading: CustomLoadingAnimationComponent,
       },
@@ -148,12 +148,12 @@ In case you would like to show a loading animation immediately, you can change t
 
 ```typescript
 import { NgModule } from "@angular/core";
-import { LoadableModule } from "ngx-loading-customizer";
+import { LoadingCustomizerModule } from "ngx-loading-customizer";
 import { LoadableLoadingComponent } from "ngx-loading-customizer";
 
 @NgModule({
   imports: [
-    LoadableModule.forRoot({
+    LoadingCustomizerModule.forRoot({
       defaultComponents: {
         idle: LoadableLoadingComponent,
       },

projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
+import { LoadingCustomizerModule } from 'projects/ngx-loading-customizer/src/lib/angular/loading-customizer.module';
 import { LoadFormModule } from '../../load-form/load-form.module';
 import { CustomDefaultLoadingExampleComponent } from './custom-default-loading-example.component';
 import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
@@ -18,7 +18,7 @@ import { RouterModule } from '@angular/router';
         component: CustomDefaultLoadingExampleComponent,
       },
     ]),
-    LoadableModule.forRoot({
+    LoadingCustomizerModule.forRoot({
       defaultComponents: {
         loading: LoadingSpinnerComponent,
       },

projects/example-app/src/app/examples/custom-loading-template-example/custom-loading-template-example.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
+import { LoadingCustomizerModule } from 'projects/ngx-loading-customizer/src/lib/angular/loading-customizer.module';
 import { CustomLoadingTemplateExampleComponent } from './custom-loading-template-example.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
 import { CommonModule } from '@angular/common';
@@ -17,7 +17,7 @@ import { RouterModule } from '@angular/router';
         component: CustomLoadingTemplateExampleComponent,
       },
     ]),
-    LoadableModule,
+    LoadingCustomizerModule,
   ],
   exports: [CustomLoadingTemplateExampleComponent],
 })

projects/example-app/src/app/examples/default-example/default-example.component.html

@@ -2,7 +2,8 @@
   <h2>Default usage example</h2>
   <p>
     This examples displays the default usage of the `ld-loadable` component. The
-    `LoadableModule` is imported with the default loading and error components.
+    `LoadingCustomizerModule` is imported with the default loading and error
+    components.
   </p>
   <app-load-form (loadable)="loadable = $event"></app-load-form>
   <ld-loadable [loadable]="loadable">

projects/example-app/src/app/examples/default-example/default-example.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
+import { LoadingCustomizerModule } from 'projects/ngx-loading-customizer/src/lib/angular/loading-customizer.module';
 import { DefaultExampleComponent } from './default-example.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
 import { CommonModule } from '@angular/common';
@@ -17,7 +17,7 @@ import { RouterModule } from '@angular/router';
         component: DefaultExampleComponent,
       },
     ]),
-    LoadableModule,
+    LoadingCustomizerModule,
   ],
   exports: [DefaultExampleComponent],
 })

projects/example-app/src/app/examples/lightweight-example/lightweight-example.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
+import { LoadingCustomizerModule } from 'projects/ngx-loading-customizer/src/lib/angular/loading-customizer.module';
 import { LightweightExampleComponent } from './lightweight-example.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
 import { CommonModule } from '@angular/common';
@@ -17,7 +17,7 @@ import { RouterModule } from '@angular/router';
         component: LightweightExampleComponent,
       },
     ]),
-    LoadableModule,
+    LoadingCustomizerModule,
   ],
   exports: [LightweightExampleComponent],
 })

projects/example-app/src/app/examples/ngrx-example/ngrx-example.module.ts

@@ -5,7 +5,7 @@ import { StoreModule } from '@ngrx/store';
 import { responseReducer } from './reducer';
 import { EffectsModule } from '@ngrx/effects';
 import { LoadEffects } from './effects';
-import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
+import { LoadingCustomizerModule } from 'projects/ngx-loading-customizer/src/lib/angular/loading-customizer.module';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
@@ -19,7 +19,7 @@ import { RouterModule } from '@angular/router';
         component: NgrxExampleComponent,
       },
     ]),
-    LoadableModule,
+    LoadingCustomizerModule,
     StoreModule.forRoot({
       response: responseReducer,
     }),

projects/ngx-loading-customizer/src/lib/angular/loadable/loadable.component.spec.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { errored, idle, loaded, loading } from '../../loadable.constructors';
-import { LoadableModule } from '../loadable.module';
+import { LoadingCustomizerModule } from '../loading-customizer.module';
 import {
   TestErrorFixtureComponent,
   TestErrorModule,
@@ -25,7 +25,7 @@ class TestLoadedComponent {
 it('renders the loaded value', () => {
   TestBed.configureTestingModule({
     declarations: [TestLoadedComponent],
-    imports: [LoadableModule],
+    imports: [LoadingCustomizerModule],
   });
   const fixture = TestBed.createComponent(TestLoadedComponent);
   fixture.detectChanges();
@@ -49,7 +49,7 @@ class TestLoadingComponent {
 it('renders the default loading state if loading', fakeAsync(() => {
   TestBed.configureTestingModule({
     declarations: [TestLoadingComponent],
-    imports: [LoadableModule],
+    imports: [LoadingCustomizerModule],
   });
   const fixture = TestBed.createComponent(TestLoadingComponent);
   fixture.detectChanges();
@@ -75,7 +75,7 @@ class TestErrorComponent {
 it('renders the default error component if errored', fakeAsync(() => {
   TestBed.configureTestingModule({
     declarations: [TestErrorComponent],
-    imports: [LoadableModule],
+    imports: [LoadingCustomizerModule],
   });
   const fixture = TestBed.createComponent(TestErrorComponent);
   fixture.detectChanges();
@@ -99,7 +99,7 @@ class TestIdleComponent {
 it('renders nothing if idle', () => {
   TestBed.configureTestingModule({
     declarations: [TestIdleComponent],
-    imports: [LoadableModule],
+    imports: [LoadingCustomizerModule],
   });
   const fixture = TestBed.createComponent(TestIdleComponent);
   fixture.detectChanges();
@@ -126,7 +126,7 @@ it('renders the custom global loading state if loading', fakeAsync(() => {
     declarations: [TestDefaultLoadingComponent],
     imports: [
       TestLoadingSpinnerModule,
-      LoadableModule.forRoot({
+      LoadingCustomizerModule.forRoot({
         defaultComponents: {
           loading: TestLoadingSpinnerComponent,
         },
@@ -160,7 +160,7 @@ it('renders the custom global error state if errored', fakeAsync(() => {
     declarations: [TestDefaultErrorComponent],
     imports: [
       TestErrorModule,
-      LoadableModule.forRoot({
+      LoadingCustomizerModule.forRoot({
         defaultComponents: {
           error: TestErrorFixtureComponent,
         },
@@ -198,7 +198,7 @@ class TestCustomLoadingComponent {
 it('renders the custom local loading state if loading', fakeAsync(() => {
   TestBed.configureTestingModule({
     declarations: [TestCustomLoadingComponent],
-    imports: [LoadableModule],
+    imports: [LoadingCustomizerModule],
   });
   const fixture = TestBed.createComponent(TestCustomLoadingComponent);
   fixture.detectChanges();
@@ -229,7 +229,7 @@ class TestCustomErrorComponent {
 it('renders the custom local error state if loading', fakeAsync(() => {
   TestBed.configureTestingModule({
     declarations: [TestCustomErrorComponent],
-    imports: [LoadableModule],
+    imports: [LoadingCustomizerModule],
   });
   const fixture = TestBed.createComponent(TestCustomErrorComponent);
   fixture.detectChanges();

projects/ngx-loading-customizer/src/lib/angular/loading-customizer.module.spec.ts

@@ -0,0 +1,7 @@
+import { LoadingCustomizerModule } from './loading-customizer.module';
+
+describe('the loading customizer module', () => {
+  it('can be created without options', () => {
+    expect(LoadingCustomizerModule.forRoot()).toBeDefined();
+  });
+});

projects/ngx-loading-customizer/src/lib/angular/loadable.module.ts → projects/ngx-loading-customizer/src/lib/angular/loading-customizer.module.ts

@@ -29,12 +29,12 @@ import { LoadedValuePipe } from './loaded-value.pipe';
   ],
   entryComponents: [LoadableLoadingComponent, LoadableErrorComponent],
 })
-export class LoadableModule {
+export class LoadingCustomizerModule {
   public static forRoot(
     options: ModuleOptions = {}
-  ): ModuleWithProviders<LoadableModule> {
+  ): ModuleWithProviders<LoadingCustomizerModule> {
     return {
-      ngModule: LoadableModule,
+      ngModule: LoadingCustomizerModule,
       providers: [
         {
           provide: DEFAULT_COMPONENTS,

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

@@ -6,7 +6,7 @@ export * from './lib/functions/from-promise.function';
 export * from './lib/functions/map.function';
 export * from './lib/functions/to-loadable.function';
 
-export * from './lib/angular/loadable.module';
+export * from './lib/angular/loading-customizer.module';
 export * from './lib/angular/loadable/loadable.component';
 export * from './lib/angular/loadable-error/loadable-error.component';
 export * from './lib/angular/loadable-loading/loadable-loading.component';