From 6d8fb45b5fe010fd770f676ff9a15540de38a077 Mon Sep 17 00:00:00 2001
From: Simon G <development@gol.ms>
Date: Sun, 23 Feb 2020 20:03:38 +0100
Subject: [PATCH] feat: the viewer-modal can be used as a controller component

- export `viewer-modal.component`
- add default values to inputs
- update README.md
---
 README.md                                     | 34 +++++++++++++++++++
 .../src/lib/ngx-ionic-image-viewer.module.ts  |  4 +--
 .../viewer-modal/viewer-modal.component.ts    | 20 ++++++-----
 .../ngx-ionic-image-viewer/src/public-api.ts  |  1 +
 4 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 3f316f5..f5e09b5 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,7 @@
   - [Import](#import)
   - [Component](#component)
   - [Directive](#directive)
+  - [Controller](#controller)
 - [Properties](#properties)
 - [Workspace](#workspace)
   - [Local Development](#local-development)
@@ -126,6 +127,39 @@ Add `ionImgViewer` as a directive within the `ion-img` HTML element of your modu
 </ion-img>
 ```
 
+### Controller
+
+Import `ViewerModalComponent` from `ngx-ionic-image-viewer` and add it to the `ModalController`. Within the `componentProps`, all available properties can be passed, whereby `src` is always required. In addition you must add the css class `ion-img-viewer` to the property `cssClass`.
+Use `cssClass: ['ion-img-viewer', 'my-custom-ion-img-viewer']`in case you want to add more css classes.
+
+```js
+import { ModalController } from '@ionic/angular';
+import { ViewerModalComponent } from 'ngx-ionic-image-viewer';
+
+export class HomePage {
+
+  constructor(public modalController: ModalController) {}
+
+  async openViewer() {
+    const modal = await this.modalController.create({
+      component: ViewerModalComponent,
+      componentProps: {
+        src: "./assets/img/demo.jpg"
+      },
+      cssClass: 'ion-img-viewer'
+      keyboardClose: true,
+      showBackdrop: true
+    });
+
+    return await modal.present();
+  }
+}
+```
+
+```html
+<ion-button (click)="openViewer()">Open Viewer</ion-button>
+```
+
 ## Properties
 
 <table>
diff --git a/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.module.ts b/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.module.ts
index fc56285..81b0ad5 100644
--- a/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.module.ts
+++ b/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.module.ts
@@ -6,9 +6,9 @@ import { NgxIonicImageViewerDirective } from './ngx-ionic-image-viewer.directive
 import { ViewerModalComponent } from './viewer-modal/viewer-modal.component';
 
 @NgModule({
-  declarations: [NgxIonicImageViewerComponent, ViewerModalComponent, NgxIonicImageViewerDirective],
+  declarations: [NgxIonicImageViewerComponent, NgxIonicImageViewerDirective, ViewerModalComponent],
   imports: [CommonModule, IonicModule],
   entryComponents: [ViewerModalComponent],
-  exports: [NgxIonicImageViewerComponent, ViewerModalComponent, NgxIonicImageViewerDirective]
+  exports: [NgxIonicImageViewerComponent, NgxIonicImageViewerDirective, ViewerModalComponent]
 })
 export class NgxIonicImageViewerModule {}
diff --git a/projects/ngx-ionic-image-viewer/src/lib/viewer-modal/viewer-modal.component.ts b/projects/ngx-ionic-image-viewer/src/lib/viewer-modal/viewer-modal.component.ts
index 4b91f10..165efdd 100644
--- a/projects/ngx-ionic-image-viewer/src/lib/viewer-modal/viewer-modal.component.ts
+++ b/projects/ngx-ionic-image-viewer/src/lib/viewer-modal/viewer-modal.component.ts
@@ -7,16 +7,18 @@ import { ModalController, IonSlides } from '@ionic/angular';
   styleUrls: ['./viewer-modal.component.scss']
 })
 export class ViewerModalComponent implements OnInit {
-  @Input() alt?: string;
-  @Input() scheme?: string;
-  @Input() slideOptions?: object;
+  // tslint:disable: no-inferrable-types
+  @Input() alt?: string = '';
+  @Input() scheme?: string = 'auto';
+  @Input() slideOptions?: object = {};
   @Input() src: string;
-  @Input() srcFallback?: string;
-  @Input() srcHighRes?: string;
-  @Input() swipeToClose?: boolean;
-  @Input() text?: string;
-  @Input() title?: string;
-  @Input() titleSize?: string;
+  @Input() srcFallback?: string = '';
+  @Input() srcHighRes?: string = '';
+  @Input() swipeToClose?: boolean = true;
+  @Input() text?: string = '';
+  @Input() title?: string = '';
+  @Input() titleSize?: string = '';
+  // tslint:enable: no-inferrable-types
 
   defaultSlideOptions = {
     centeredSlides: true,
diff --git a/projects/ngx-ionic-image-viewer/src/public-api.ts b/projects/ngx-ionic-image-viewer/src/public-api.ts
index 80966a3..e8e8876 100644
--- a/projects/ngx-ionic-image-viewer/src/public-api.ts
+++ b/projects/ngx-ionic-image-viewer/src/public-api.ts
@@ -6,3 +6,4 @@ export * from './lib/ngx-ionic-image-viewer.service';
 export * from './lib/ngx-ionic-image-viewer.component';
 export * from './lib/ngx-ionic-image-viewer.directive';
 export * from './lib/ngx-ionic-image-viewer.module';
+export * from './lib/viewer-modal/viewer-modal.component';