prep release

README.md

@@ -97,7 +97,7 @@ import { AppComponent } from './app.component';
 export class AppModule {}
 ```
 
-## Usage
+## Using the ngx-picture component
 
 ```html
 <ngx-picture
@@ -111,14 +111,89 @@ If **lazyLoad** is true the component will use an IntersectionObserver (if it is
 
 \*Remember to import the **NgxPictureModule** into the relevant module.
 
-### Custom configurations
+## Advanced configuration
 
-override src interpolator on default configs
-custom breakpoints
-change the breakpoint value type
-changing the image template
+### Changing the breakpoint value type and srcInterpolator
 
-### example of rendered element
+**NgxPictureConfig** is generic so you can change the brreakpoint values to anuthing required in the **srcInterPolator** function. This example is using the [Angular CDK](https://material.angular.io/cdk/layout/overview) breakpoints for the breakpoint keys.
+
+```typescript
+import { Breakpoints } from '@angular/cdk/layout';
+
+export interface Dimensions {
+  h: number;
+  w: number;
+}
+
+const ngxPictureConfig: NgxPictureConfig<Dimensions> = {
+  breakpoints: {
+    [Breakpoints.XSmall]: { h: 10, w: 10 },
+    [Breakpoints.Medium]: { h: 100, w: 100 },
+    [Breakpoints.Large]: { h: 200, w: 200 }
+  },
+  imageFormats: ['webp', 'jpg'],
+  srcInterpolator: (
+    url: string,
+    imageFormat: ImageFormat,
+    breakpoint: string,
+    breakpointValue: Dimensions
+  ) => `${url}/w:${breakpointValue.w}/h:${breakpointValue.h}`
+};
+
+export function srcInterpolator(
+  url: string,
+  imageFormat: ImageFormat,
+  breakpoint: string,
+  breakpointValue: number
+) {
+  return `${url.split('.')[0]}-${breakpointValue}.${
+    imageFormat === 'jpeg' ? 'jpg' : 'webp'
+  }`;
+}
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatListModule,
+    NgxPictureModule.forRoot(ngxPictureConfig)
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+### Changing the image template
+
+To use a custom img element provide an **ngTemplate** called **#imgTemplate**.
+
+```html
+<ngx-picture
+  src="assets/images/banner.jpg"
+  alt="test"
+  [lazyLoad]="true"
+  #picture
+>
+  <ng-template #imgTemplate let-imageData>
+    <img class="custom-template" [src]="imageData.src" [alt]="imageData.alt" />
+  </ng-template>
+</ngx-picture>
+```
+
+The data context for the template is:
+
+```typescript
+{
+  src: string,
+  alt: string
+}
+```
+
+## Example of rendered element
 
 ```html
 <picture>

license.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 Useful Software Solutions Ltd
+Copyright (c) 2020 Useful Software Solutions Ltd
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

projects/ngx-picture/src/lib/cloudinary-config.ts

@@ -1,12 +1,13 @@
 import { DEFAULT_BREAKPOINTS } from './default-breakpoints';
 import { NgxPictureConfig } from './ngx-picture-config';
+import { ImageFormat } from './picture/picture.component';
 
 export const CLOUDINARY_CONFIG: NgxPictureConfig<number> = {
   breakpoints: DEFAULT_BREAKPOINTS,
   imageFormats: ['webp', 'jpg'],
   srcInterpolator: (
     url: string,
-    imageFormat: any,
+    imageFormat: ImageFormat,
     breakpoint: string,
     breakpointValue: number
   ) =>

projects/ngx-picture/src/lib/graph-cms-config.ts

@@ -1,12 +1,13 @@
 import { DEFAULT_BREAKPOINTS } from './default-breakpoints';
 import { NgxPictureConfig } from './ngx-picture-config';
+import { ImageFormat } from './picture/picture.component';
 
 export const GRAPH_CMS_CONFIG: NgxPictureConfig<number> = {
   breakpoints: DEFAULT_BREAKPOINTS,
   imageFormats: ['webp', 'jpg'],
   srcInterpolator: (
     url: string,
-    imageFormat: any,
+    imageFormat: ImageFormat,
     breakpoint: string,
     breakpointValue: number
   ) =>

projects/ngx-picture/src/lib/imagekit-config.ts

@@ -1,12 +1,13 @@
 import { DEFAULT_BREAKPOINTS } from './default-breakpoints';
 import { NgxPictureConfig } from './ngx-picture-config';
+import { ImageFormat } from './picture/picture.component';
 
 export const IMAGEKIT_CONFIG: NgxPictureConfig<number> = {
   breakpoints: DEFAULT_BREAKPOINTS,
   imageFormats: ['webp', 'jpg'],
   srcInterpolator: (
     url: string,
-    imageFormat: any,
+    imageFormat: ImageFormat,
     breakpoint: string,
     breakpointValue: number
   ) => {

projects/ngx-picture/src/lib/ngx-picture-config.ts

@@ -1,11 +1,13 @@
+import { ImageFormat } from './picture/picture.component';
+
 export interface NgxPictureConfig<T = number> {
   breakpoints: {
     [key: string]: T;
   };
   imageFormats?: any[];
   srcInterpolator: (
     url: string,
-    imageFormat: any,
+    imageFormat: ImageFormat,
     breakpoint: string,
     breakpointValue: T
   ) => string;

projects/ngx-picture/src/lib/ngx-picture.module.ts

@@ -11,7 +11,7 @@ import { PictureComponent } from './picture/picture.component';
   entryComponents: [PictureComponent]
 })
 export class NgxPictureModule {
-  static forRoot(config: NgxPictureConfig): ModuleWithProviders {
+  static forRoot<T>(config: NgxPictureConfig<T>): ModuleWithProviders {
     return {
       ngModule: NgxPictureModule,
       providers: [