Cleaned package.json and bumped up the version

package.json

@@ -3,7 +3,7 @@
   "description": "Angular wrapper library for Swiper",
   "bugs": "https://github.com/zefoy/ngx-swiper-wrapper/issues",
   "license": "MIT",
-  "version": "9.0.0",
+  "version": "9.0.0-0",
   "main": "./bundles/ngx-swiper-wrapper.umd.js",
   "module": "./dist/ngx-swiper-wrapper.es5.js",
   "typings": "./dist/ngx-swiper-wrapper.d.ts",
@@ -29,8 +29,7 @@
     "build:html": "cpx src/lib/swiper.component.html dist/lib/",
     "bundle:es5": "rollup -c config/rollup-es5.config.js --silent",
     "bundle:umd": "rollup -c config/rollup-umd.config.js --silent",
-    "minify:umd": "terser bundles/$npm_package_name.umd.js -o bundles/$npm_package_name.umd.min.js --source-map=\"filename=bundles/$npm_package_name.umd.min.js.map\"",
-    "prepublishOnly": "node --eval \"console.error('ERROR: Trying to publish a package that has been compiled by NGCC. This is not allowed.\\nPlease delete and rebuild the package, without compiling with NGCC, before attempting to publish.\\nNote that NGCC may have been run by importing this package into another project that is being built with Ivy enabled.\\n')\" && exit 1"
+    "minify:umd": "terser bundles/$npm_package_name.umd.js -o bundles/$npm_package_name.umd.min.js --source-map=\"filename=bundles/$npm_package_name.umd.min.js.map\""
   },
   "repository": {
     "type": "git",
@@ -69,14 +68,5 @@
   "peerDependencies": {
     "@angular/common": ">=5.0.0",
     "@angular/core": ">=5.0.0"
-  },
-  "__processed_by_ivy_ngcc__": {
-    "fesm2015": "9.0.0-rc.7",
-    "fesm5": "9.0.0-rc.7",
-    "es2015": "9.0.0-rc.7",
-    "esm2015": "9.0.0-rc.7",
-    "esm5": "9.0.0-rc.7",
-    "main": "9.0.0-rc.7",
-    "module": "9.0.0-rc.7"
   }
 }

projects/app/browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

projects/app/src/app/app.component.css

@@ -0,0 +1,91 @@
+.app-title {
+  font-size: 24px;
+}
+
+.box-title {
+  font-size: 20px;
+}
+
+.box-container {
+  box-sizing: border-box;
+  width: 800px;
+  height: 500px;
+  max-width: 90%;
+  max-height: 90%;
+  padding: 24px;
+  margin: 24px auto;
+  border-radius: 4px;
+
+  color: #555;
+  background-color: #eee;
+  box-shadow:
+    0 6px 20px rgba(0, 0, 0, 0.18),
+    0 6px 6px rgba(0, 0, 0, 0.25);
+}
+
+.info-container {
+  padding: 12px 16px;
+
+  line-height: 24px;
+}
+
+.action-container,
+.content-container {
+  position: relative;
+
+  overflow: auto;
+  height: 300px;
+  min-height: 0;
+  margin: 8px 16px;
+  border-radius: 4px;
+
+  background-color: #fff;
+}
+
+.action-container {
+  padding: 16px;
+}
+
+.vertical-container,
+.horizontal-container {
+  min-height: 0 !important;
+}
+
+.action-button {
+  box-sizing: border-box;
+  width: calc(100% - 16px);
+  min-height: 35px;
+  padding: 4px 16px;
+  margin: 8px;
+  border: 1px solid #555;
+  border-radius: 4px;
+
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 14px;
+  text-align: center;
+}
+
+.action-button:hover {
+  color: #fff;
+  background-color: #555;
+}
+
+.swiper-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.swiper-slide {
+  color: #aaa;
+  background-color: #eee;
+}
+
+.swiper-slide-active {
+  color: #fff;
+  background-color: #aaa;
+}

projects/app/src/app/app.component.html

@@ -0,0 +1,57 @@
+<div class="box-container" fxLayout="column" [ngStyle.lt-sm]="'min-height: 800px;'">
+  <div class="app-title">Simple example app for the ngx-swiper-wrapper</div>
+
+  <div class="info-container">
+    You can change the basic settings of the Swiper area by clicking the buttons on the controls pane.
+  </div>
+
+  <div class="horizontal-container" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="stretch" fxFlex="auto">
+    <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
+      <div class="box-title">Controls</div>
+
+      <div class="action-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="auto">
+        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleType()'>{{(type == "component") ? "Switch to directive" : "Switch to component"}}</div>
+
+        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleDirection()'>{{(config.direction == "horizontal") ? "Change to vertical" : "Change to horizontal"}}</div>
+
+        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleSlidesPerView()'>Toggle slides per view</div>
+
+        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleOverlayControls()'>Toggle overlay controls</div>
+
+        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleKeyboardControl()'>{{config.keyboard ? "Disable arrow keys" : "Enable arrow keys"}}</div>
+
+        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleMouseWheelControl()'>{{config.mousewheel ? "Disable mouse wheel" : "Enable mouse wheel"}}</div>
+      </div>
+    </div>
+
+    <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
+      <div class="box-title">Swiper</div>
+
+      <div class="content-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="auto">
+        <swiper *ngIf="type == 'component' && show" class="swiper-container" fxFlex="auto" [config]="config" [disabled]="disabled" (indexChange)="onIndexChange($event)" (swiperTransitionStart)="onSwiperEvent('transitionStart')" (swiperTransitionEnd)="onSwiperEvent('transitionEnd')">
+          <div *ngFor="let slide of slides" class="swiper-slide">
+            <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
+              {{slide}}
+            </div>
+          </div>
+        </swiper>
+
+        <div *ngIf="type == 'directive' && show" class="swiper-container" [disabled]="disabled" [swiper]="config" (indexChange)="onIndexChange($event)" (swiperTransitionStart)="onSwiperEvent('transitionStart')" (swiperTransitionEnd)="onSwiperEvent('transitionEnd')">
+          <div class="swiper-wrapper">
+            <div *ngFor="let slide of slides" class="swiper-slide">
+              <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
+                {{slide}}
+              </div>
+            </div>
+          </div>
+
+          <div class="swiper-scrollbar" [hidden]="config.scrollbar === false"></div>
+          <div class="swiper-pagination" [hidden]="config.pagination === false"></div>
+
+          <div class="swiper-button-prev" [hidden]="config.navigation === false"></div>
+          <div class="swiper-button-next" [hidden]="config.navigation === false"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

projects/app/src/app/app.component.ts

@@ -0,0 +1,116 @@
+import { Component, ViewChild } from '@angular/core';
+
+import { SwiperComponent, SwiperDirective, SwiperConfigInterface,
+  SwiperScrollbarInterface, SwiperPaginationInterface } from 'ngx-swiper-wrapper';
+
+@Component({
+  selector: 'my-app',
+  moduleId: 'src/app/app.component',
+  templateUrl: 'app.component.html',
+  styleUrls: [ 'app.component.css' ]
+})
+export class AppComponent {
+  public show: boolean = true;
+
+  public slides = [
+    'First slide',
+    'Second slide',
+    'Third slide',
+    'Fourth slide',
+    'Fifth slide',
+    'Sixth slide'
+  ];
+
+  public type: string = 'component';
+
+  public disabled: boolean = false;
+
+  public config: SwiperConfigInterface = {
+    a11y: true,
+    direction: 'horizontal',
+    slidesPerView: 1,
+    keyboard: true,
+    mousewheel: true,
+    scrollbar: false,
+    navigation: true,
+    pagination: false
+  };
+
+  private scrollbar: SwiperScrollbarInterface = {
+    el: '.swiper-scrollbar',
+    hide: false,
+    draggable: true
+  };
+
+  private pagination: SwiperPaginationInterface = {
+    el: '.swiper-pagination',
+    clickable: true,
+    hideOnClick: false
+  };
+
+  @ViewChild(SwiperComponent, { static: false }) componentRef?: SwiperComponent;
+  @ViewChild(SwiperDirective, { static: false }) directiveRef?: SwiperDirective;
+
+  constructor() {}
+
+  public toggleType(): void {
+    this.type = (this.type === 'component') ? 'directive' : 'component';
+  }
+
+  public toggleDisabled(): void {
+    this.disabled = !this.disabled;
+  }
+
+  public toggleDirection(): void {
+    this.config.direction = (this.config.direction === 'horizontal') ? 'vertical' : 'horizontal';
+  }
+
+  public toggleSlidesPerView(): void {
+    if (this.config.slidesPerView !== 1) {
+      this.config.slidesPerView = 1;
+    } else {
+      this.config.slidesPerView = 2;
+    }
+  }
+
+  public toggleOverlayControls(): void {
+    if (this.config.navigation) {
+      this.config.scrollbar = false;
+      this.config.navigation = false;
+
+      this.config.pagination = this.pagination;
+    } else if (this.config.pagination) {
+      this.config.navigation = false;
+      this.config.pagination = false;
+
+      this.config.scrollbar = this.scrollbar;
+    } else {
+      this.config.scrollbar = false;
+      this.config.pagination = false;
+
+      this.config.navigation = true;
+    }
+
+    if (this.type === 'directive' && this.directiveRef) {
+      this.directiveRef.setIndex(0);
+    } else if (this.type === 'component' && this.componentRef && this.componentRef.directiveRef) {
+      this.componentRef.directiveRef.setIndex(0);
+    }
+  }
+
+  public toggleKeyboardControl(): void {
+    this.config.keyboard = !this.config.keyboard;
+  }
+
+  public toggleMouseWheelControl(): void {
+    this.config.mousewheel = !this.config.mousewheel;
+  }
+
+  public onIndexChange(index: number): void {
+    console.log('Swiper index: ', index);
+  }
+
+  public onSwiperEvent(event: string): void {
+    console.log('Swiper event: ', event);
+  }
+}

projects/app/src/app/app.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+
+import { BrowserModule } from '@angular/platform-browser';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { SwiperModule, SwiperConfigInterface,
+  SWIPER_CONFIG } from 'ngx-swiper-wrapper';
+
+import { AppComponent } from './app.component';
+
+const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
+  observer: true,
+  direction: 'horizontal',
+  threshold: 50,
+  spaceBetween: 5,
+  slidesPerView: 1,
+  centeredSlides: true
+};
+
+@NgModule({
+  bootstrap: [
+    AppComponent
+  ],
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    SwiperModule,
+    BrowserModule,
+    FlexLayoutModule
+  ],
+  exports: [
+  ],
+  providers: [
+    {
+      provide: SWIPER_CONFIG,
+      useValue: DEFAULT_SWIPER_CONFIG
+    }
+  ]
+})
+export class AppModule {}

projects/app/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

projects/app/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.