feat(lib): added mode to sidenav and template navigation buttons + added pageChanged and done events

Author: AnthonyNahas

src/module/components/ngx-material-pages/ngx-material-pages.component.html

@@ -1,20 +1,20 @@
 <mat-sidenav-container>
-  <mat-sidenav #start [mode]="'side'" opened="true"
+  <mat-sidenav #sidenav [mode]="navMode" opened="true"
                [fixedInViewport]="'false'" [fixedTopGap]="'false'" [fixedBottomGap]="'false'">
 
     <mat-toolbar color="primary">
     </mat-toolbar>
 
     <mat-vertical-stepper [selectedIndex]="index" (selectionChange)="onStepSelectionChange($event)">
-      <mat-step *ngFor="let page of pages;let i = index;">
+      <mat-step *ngFor="let page of pages;let i = index;" [label]="page.pageOutlook.title">
         <ng-container [ngTemplateOutlet]="page.pageOutlook.content"></ng-container>
       </mat-step>
     </mat-vertical-stepper>
   </mat-sidenav>
 
   <mat-sidenav-content>
     <mat-toolbar color="primary">
-      <button mat-icon-button>
+      <button mat-icon-button (click)="sidenav.toggle()">
         <mat-icon>menu</mat-icon>
       </button>
       ngx-material-pages
@@ -31,16 +31,24 @@
       </mat-tab-group>
 
 
-      <div fxLayoutAlign="space-between" style="margin: 1rem">
-        <button mat-fab color="primary" (click)="previous()">
+      <div class="navigation-buttons">
+        <button mat-fab color="primary" (click)="previous()" [disabled]="index == 0">
           <mat-icon>chevron_left</mat-icon>
         </button>
-        <button mat-fab color="primary" (click)="next()">
-          <mat-icon>chevron_right</mat-icon>
-        </button>
+        <div *ngIf="index == totalPages - 1;then finished else nextAvailable">
+        </div>
+        <ng-template #nextAvailable>
+          <button mat-fab color="primary" (click)="next()">
+            <mat-icon>chevron_right</mat-icon>
+          </button>
+        </ng-template>
+        <ng-template #finished>
+          <button mat-fab color="accent" (click)="done.next()">
+            <mat-icon>done</mat-icon>
+          </button>
+        </ng-template>
       </div>
 
-      <!--<button mat-button (click)="start.toggle(undefined, 'mouse')">Toggle Start Side Sidenav</button>-->
     </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

src/module/components/ngx-material-pages/ngx-material-pages.component.scss

@@ -1,3 +1,12 @@
 ::ng-deep .mat-tab-label-container {
   display: none !important;
 }
+
+.navigation-buttons {
+  margin: 1rem;
+  place-content: stretch space-between;
+  align-items: stretch;
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+}

src/module/components/ngx-material-pages/ngx-material-pages.component.ts

@@ -2,23 +2,37 @@ import {
   AfterContentInit,
   ChangeDetectionStrategy,
   Component,
-  ContentChildren,
-  forwardRef,
-  OnInit,
-  QueryList,
+  ContentChildren, EventEmitter,
+  forwardRef, HostListener,
+  OnInit, Output,
+  QueryList, ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import {NgxMaterialPageLoaderComponent} from './ngx-material-page-loader/ngx-material-page-loader.component';
 import {StepperSelectionEvent} from '@angular/cdk/stepper';
+import {MatSidenav} from '@angular/material';
 
 @Component({
   selector: 'ngx-material-pages',
   templateUrl: './ngx-material-pages.component.html',
-  styleUrls: ['./ngx-material-pages.component.scss'],
+  styleUrls: ['./ngx-material-pages.component.scss']
 })
 export class NgxMaterialPagesComponent implements OnInit, AfterContentInit {
 
-  @ContentChildren(NgxMaterialPageLoaderComponent) pages: QueryList<NgxMaterialPageLoaderComponent>;
+  @ViewChild('sidenav')
+  sidenav: MatSidenav;
+
+  @ContentChildren(NgxMaterialPageLoaderComponent)
+  pages: QueryList<NgxMaterialPageLoaderComponent>;
+
+  @Output()
+  done: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  pageChanged: EventEmitter<number> = new EventEmitter<number>();
+
+  // the mode of the sidenav
+  navMode = 'side';
 
   // current page
   index: number;
@@ -30,35 +44,57 @@ export class NgxMaterialPagesComponent implements OnInit, AfterContentInit {
     this.index = 0;
   }
 
+  private _initSidenavMode(): void {
+    if (window.innerWidth < 768) {
+      this.navMode = 'over';
+    }
+  }
+
   ngOnInit() {
+    this._initSidenavMode();
   }
 
   ngAfterContentInit() {
-    console.log('pagesOutlook', this.pages);
     this.totalPages = this.pages.length;
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    if (event.target.innerWidth < 768) {
+      this.navMode = 'over';
+      this.sidenav.close();
+    }
+    if (event.target.innerWidth > 768) {
+      this.navMode = 'side';
+      this.sidenav.open();
+    }
+  }
+
   /**
    * Go to the previous page if it exists
    */
   previous() {
-    console.log('index before', this.index);
     this.index = this.index === 0 ? 0 : --this.index;
-    console.log('index after', this.index);
+    this.pageChanged.emit(this.index);
   }
 
   /**
    * Go to the next page if it exists
    */
   next() {
-    console.log('index before', this.index);
     this.index = this.index === this.totalPages - 1 ? this.totalPages - 1 : ++this.index;
-    console.log('index after', this.index);
+    this.pageChanged.emit(this.index);
   }
 
+
+  /**
+   * Update the value of the index when a step has been selected.
+   * Emit this value for pagechanged's subscribers.
+   *
+   */
   onStepSelectionChange(event: StepperSelectionEvent) {
-    console.log('event = ', event);
     this.index = event.selectedIndex;
+    this.pageChanged.emit(this.index);
   }
 
 }