fix(demo): added getting started component

package.json

@@ -52,6 +52,7 @@
     "angulartics2": "^8.3.0",
     "express": "^4.15.2",
     "firebase": "^7.8.2",
+    "ngx-clipboard": "^12.3.1",
     "ngx-markdown": "^8.2.2",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",

src/app/getting-started/getting-started-routing.module.ts

@@ -0,0 +1,11 @@
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { GettingStartedComponent } from './getting-started.component';
+
+@NgModule({
+    imports: [RouterModule.forChild([
+      { path: '', component: GettingStartedComponent }
+    ])],
+    exports: [RouterModule]
+  })
+export class GettingStartedRoutingModule {}

src/app/getting-started/getting-started.component.scss

@@ -0,0 +1,63 @@
+.getting-started {
+  margin-top: 1.0rem;
+}
+
+.main-container {
+  //position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  //padding: 48px;
+  overflow: auto;
+}
+
+.demo-sidenav-area {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+
+  .mat-toolbar {
+    flex: 0;
+  }
+
+  .mat-sidenav-container {
+    flex: 1;
+  }
+
+  .demo-sidenav-content {
+    padding: 32px;
+  }
+
+  .demo-filler-content {
+    padding: 60px;
+  }
+}
+
+video {
+  max-width: 100%;
+}
+
+button:focus {
+  outline: none;
+}
+
+.comment-container {
+  margin: 1rem;
+}
+
+.mat-button {
+  white-space: normal !important;
+}
+
+//::ng-deep ngx-auth-firebaseui .mat-tab-label-container {
+//  display: flex;
+//}
+
+.lib-compontent{
+  margin-bottom: 2rem;
+}

src/app/getting-started/getting-started.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+
+import { GettingStartedComponent } from './getting-started.component';
+
+describe('GettingStartedComponent', () => {
+  let component: GettingStartedComponent;
+  let fixture: ComponentFixture<GettingStartedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GettingStartedComponent]
+    })
+      .compileComponents()
+      .then(() => {
+        fixture = TestBed.createComponent(GettingStartedComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+      });
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/getting-started/getting-started.component.ts

@@ -0,0 +1,191 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {Title} from '@angular/platform-browser';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+
+@Component({
+  selector: 'app-getting-started',
+  templateUrl: './getting-started.component.html',
+  styleUrls: ['./getting-started.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class GettingStartedComponent implements OnInit {
+
+
+  @Input()
+  index = 0;
+
+  totalSteps = 2;
+
+  isLaunched = false;
+  fillerContent = Array(15);
+  fixed = false;
+  coverHeader = false;
+  showHeader = false;
+  showFooter = false;
+  modeIndex = 0;
+  hasBackdrop: boolean;
+
+  get mode() {
+    return ['side', 'over', 'push'][this.modeIndex];
+  }
+
+  get fixedTop() {
+    return this.fixed && this.showHeader && !this.coverHeader ? 64 : 0;
+  }
+
+  get fixedBottom() {
+    return this.fixed && this.showFooter && !this.coverHeader ? 64 : 0;
+  }
+
+  ngVersion = `      _                      _                 ____ _     ___
+                  / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
+                 / △ \\ | '_ \\ / _\` | | | | |/ _\` | '__|   | |   | |    | |
+                / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
+               /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|
+                              |___/
+
+
+              Angular CLI: 6.0.0
+              Node: 8.11.3
+              OS: darwin x64
+              Angular: 6.0.6`;
+
+  importBrowserAnimationsModule = `import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+                                    @NgModule({
+                                      ...
+                                      imports: [BrowserAnimationsModule],
+                                      ...
+                                    })
+                                    export class YourAppModule { }`;
+
+
+  importNoopAnimationsModule = `import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+                                    @NgModule({
+                                      ...
+                                      imports: [NoopAnimationsModule],
+                                      ...
+                                    })
+                                    export class YourAppModule { }`;
+
+  importMaterialThemeSCSS = `@import "~@angular/material/prebuilt-themes/indigo-pink.css";`;
+
+  customMaterialTheme =
+    `@import '../node_modules/@angular/material/theming';
+     // Plus imports for other components in your app
+     // Include the common styles for Angular Material. We include this here so that you only
+     // have to load a single css file for Angular Material in your app.
+     // Be sure that you only ever include this mixin once!
+     @include mat-core()
+     // Define the palettes for your theme using the Material Design palettes available in palette.scss
+     // (imported above). For each palette, you can optionally specify a default, lighter, and darker
+     // hue.
+     $candy-app-primary: mat-palette($mat-indigo);
+     $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400)
+     // The warn palette is optional (defaults to red).
+     $candy-app-warn:    mat-palette($mat-red)
+     // Create the theme object (a Sass map containing all of the palettes).
+     $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn)
+     // Include theme styles for core and each component used in your app.
+     // Alternatively, you can import and @include the theme mixins for each component
+     // that you are using.
+     @include angular-material-theme($candy-app-theme);
+     `;
+
+  stylesBeforeImportMDI = `"styles": [
+        "styles.css"
+      ],`;
+
+  stylesAfterImportMDI = `"styles": [
+        "styles.css",
+        "node_modules/material-design-icons/iconfont/material-icons.css"
+      ],`;
+
+  materialIconsLink = `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`;
+
+  systemJSModuleImport = `map: {
+  'ngx-auth-firebaseui': 'node_modules/ngx-auth-firebaseui/bundles/ngx-auth-firebaseui.umd.js',
+  }`;
+
+  importNgxAuthFirebaseUIModule = `import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';`;
+
+  importNgxAuthFirebaseUIModuleInAppModule = `import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
+                                              import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+                                              @NgModule({
+                                                declarations: [AppComponent, ...],
+                                                imports: [NgxAuthFirebaseUIModule.forRoot({
+                                                  apiKey: 'your-firebase-apiKey',
+                                                  authDomain: 'your-firebase-authDomain',
+                                                  databaseURL: 'your-firebase-databaseURL',
+                                                  projectId: 'your-firebase-projectId',
+                                                  storageBucket: 'your-firebase-storageBucket',
+                                                  messagingSenderId: 'your-firebase-messagingSenderId'
+                                              }),
+                                                BrowserAnimationsModule,
+                                                 ...],
+                                                bootstrap: [AppComponent]
+                                              })
+                                              export class AppModule {
+                                              }`;
+
+  importNgxAuthFirebaseUIModuleInOtherModule = `import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
+
+                                                @NgModule({
+                                                  declarations: [OtherComponent, ...],
+                                                  imports: [NgxAuthFirebaseUIModule, ...],
+                                                })
+                                                export class OtherModule {
+                                                }`;
+
+  firebaseConfiguration = `{
+                    apiKey: 'your-firebase-apiKey',
+                    authDomain: 'your-firebase-authDomain',
+                    databaseURL: 'your-firebase-databaseURL',
+                    projectId: 'your-firebase-projectId',
+                    storageBucket: 'your-firebase-storageBucket',
+                    messagingSenderId: 'your-firebase-messagingSenderId'
+                }`;
+
+  copyAssetSnippet = `{
+                      "glob": "**/*",
+                      "input": "node_modules/ngx-auth-firebaseui/assets/",
+                      "output": "./assets/"
+                      }`;
+
+  afterCopyingAssestSnippet = `"assets": [
+                                  "assets",
+                                  "favicon.ico",
+                                  {
+                                    "glob": "**/*",
+                                    "input": "node_modules/ngx-auth-firebaseui/assets/",
+                                    "output": "./assets/"
+                                  }
+                                ]`;
+
+  exampleNgxAuthFirebaseUI = `<ngx-auth-firebaseui (onSuccess)="printUser($event)" (onError)="printError()"></ngx-auth-firebaseui>`;
+
+
+  constructor(private titleService: Title,
+              public snackBar: MatSnackBar) {
+  }
+
+  ngOnInit() {
+    this.titleService.setTitle('Getting Started | ngx-auth-firebaseui');
+  }
+
+  showCopyMessage(content: string) {
+    this.snackBar.open(`${content} copied`, 'OK', {
+      duration: 3000
+    });
+  }
+
+  next() {
+    console.log('index before', this.index);
+    this.index = this.index === this.totalSteps - 1 ? this.totalSteps - 1 : ++this.index;
+    console.log('index after', this.index);
+  }
+
+}

src/app/getting-started/getting-started.module.ts

@@ -0,0 +1,45 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {GettingStartedComponent} from './getting-started.component';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {ClipboardModule} from 'ngx-clipboard';
+import {MatPagesModule} from '@angular-material-extensions/pages';
+import {MatCardModule} from '@angular/material/card';
+import {GettingStartedRoutingModule} from './getting-started-routing.module';
+import {MarkdownModule} from 'ngx-markdown';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    GettingStartedRoutingModule,
+    MarkdownModule.forChild(),
+    NgxAuthFirebaseUIModule,
+    FlexLayoutModule,
+    MatPagesModule,
+    ClipboardModule,
+    MatCardModule,
+    MatSidenavModule,
+    MatStepperModule,
+    MatCheckboxModule,
+    MatInputModule,
+    MatIconModule,
+    MatDividerModule,
+    MatSnackBarModule,
+    MatTooltipModule
+  ],
+  declarations:
+    [
+      GettingStartedComponent,
+    ],
+})
+export class GettingStartedModule {
+}