docs(demo): add demo sources for Angular 6

.npmignore

@@ -4,6 +4,7 @@
 # demo sources
 demo/
 demo-v7/
+demo-v6/
 
 # TypeScript-related files
 *.ts

demo-v6/.gitignore

@@ -0,0 +1,16 @@
+build/
+dist/
+*.ngfactory.ts
+*.ngstyle.ts
+*.ngsummary.json
+
+# auto-generated files
+*-demo.main.ts
+*-demo.main.dev.ts
+*-demo.data.ts
+*.auto-gen.ts
+
+# ngc-generated files
+src/**/*.d.ts
+src/**/*.js
+src/**/*.js.map

demo-v6/bin/examples.ts

@@ -0,0 +1,68 @@
+export interface Example {
+  entry: string;
+  name: string;
+  path: string;
+  label: string;
+  title: string;
+  index?: boolean;
+  forms?: boolean;
+  additional?: {
+    filename: string,
+    entry: string,
+    title: string,
+    type: string,
+  };
+}
+
+export const examples: Example[] = [
+  {
+    entry: 'demo-basic',
+    name: 'basic',
+    path: '/',
+    label: 'Basic',
+    title: 'Basic Example',
+    index: true,
+  },
+  {
+    entry: 'demo-forms',
+    name: 'forms',
+    path: '/forms',
+    label: 'Forms',
+    title: 'Forms Example',
+    forms: true,
+  },
+  {
+    entry: 'demo-global-config',
+    name: 'global-config',
+    path: '/global-config',
+    label: 'Global Config',
+    title: 'Global Config Example',
+  },
+  {
+    entry: 'demo-invisible',
+    name: 'invisible',
+    path: '/invisible',
+    label: 'Invisible',
+    title: 'Invisible reCAPTCHA API Example',
+  },
+  {
+    entry: 'demo-language',
+    name: 'language',
+    path: '/language',
+    label: 'Language',
+    title: 'Language Example',
+  },
+  {
+    entry: 'demo-preload-api',
+    name: 'preload-api',
+    path: '/preload-api',
+    label: 'Preloaded',
+    title: 'Preloaded reCAPTCHA API Example',
+    additional: {
+      filename: 'preload-api-demo.head',
+      entry: 'head-preload-api',
+      title: 'script.ts',
+      type: 'ts',
+    },
+  },
+];

demo-v6/bin/file-gen.ts

@@ -0,0 +1,81 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { examples } from './examples';
+
+const sourceDir = path.join(process.cwd(), 'src');
+
+function writeExampleFile(featureName, fileName, contents) {
+  const location = path.join(sourceDir, 'app', 'examples', featureName, fileName);
+
+  fs.writeFileSync(location, contents, { encoding: 'UTF8' });
+}
+
+function generateMain(featureName) {
+  const contents = `import { enableProdMode } from '@angular/core';
+import { platformBrowser } from '@angular/platform-browser';
+import { DemoModuleNgFactory } from './${featureName}-demo.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(DemoModuleNgFactory);
+`;
+
+  writeExampleFile(featureName, `${featureName}-demo.main.ts`, contents);
+}
+
+function generateMainDev(featureName) {
+  const contents = `import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DemoModule } from './${featureName}-demo.module';
+
+platformBrowserDynamic().bootstrapModule(DemoModule);
+`;
+
+  writeExampleFile(featureName, `${featureName}-demo.main.dev.ts`, contents);
+}
+
+function generateData(example) {
+  const featureName = example.name;
+  const additionalContents = !example.additional ? '' : `
+    additional: {
+      content: require('!highlight-loader?raw=true&lang=${example.additional.type}!./${example.additional.filename}.ts'),
+      title: '${example.additional.title}',
+      type: '${example.additional.type}',
+    },`;
+  const contents = `// tslint:disable no-require-imports no-submodule-imports
+import { PageSettings } from '../../demo-wrapper/demo-wrapper.component';
+
+export const settings: PageSettings = {
+  feature: '${featureName}',
+  title: '${example.title}',
+  content: {
+    component: require('!highlight-loader?raw=true&lang=ts!./${featureName}-demo.component.ts'),
+    html: require('!highlight-loader?raw=true&lang=html!./${featureName}-demo.component.html'),
+    module: require('!highlight-loader?raw=true&lang=ts!./${featureName}-demo.module.ts'),${additionalContents}
+  },
+};
+`;
+
+  writeExampleFile(featureName, `${featureName}-demo.data.ts`, contents);
+}
+
+function generateLinks() {
+  const location = path.join(sourceDir, 'app', 'demo-wrapper', 'demo-wrapper.data.auto-gen.ts');
+  const contents = `export const navLinks = [
+  ${examples.map((e) => `{
+    label: '${e.label}',
+    path: '${e.path}',
+    feature: '${e.name}',
+  },`).join('\n  ')}
+];
+`;
+
+  fs.writeFileSync(location, contents, { encoding: 'UTF8' });
+}
+
+function generateFiles() {
+  examples.map((e) => e.name).forEach(generateMain);
+  examples.map((e) => e.name).forEach(generateMainDev);
+  examples.forEach(generateData);
+  generateLinks();
+}
+
+generateFiles();

demo-v6/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "ng-recaptcha-demo",
+  "private": true,
+  "scripts": {
+    "file-gen": "ts-node ./bin/file-gen.ts",
+    "prelatest": "cd .. && yarn pack-latest",
+    "latest": "yarn install --update-checksums; yarn cache clean ng-recaptcha; yarn upgrade ../ng-recaptcha-latest.tgz --update-checksums",
+    "clean:build": "rimraf src/**/*.{js,js.map,ngsummary.json,d.ts,metadata.json,auto-gen.ts} src/app/examples/**/*{-demo.main.ts,-demo.main.dev.ts,-demo.data.ts}",
+    "clean:dist": "rimraf dist",
+    "clean": "run-s clean:build clean:dist",
+    "ngc": "ngc",
+    "serve": "http-server ./dist -a localhost -p 9000 -c-1",
+    "start": "run-s build-dev serve",
+    "start-dev": "TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack-dev-server",
+    "build": "run-s latest clean file-gen ngc webpack:prod",
+    "build-dev": "run-s latest clean file-gen ngc webpack:dev",
+    "webpack:prod": "NODE_ENV=production TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack -p",
+    "webpack:dev": "TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack"
+  },
+  "dependencies": {
+    "@angular/animations": "^6.0.2",
+    "@angular/cdk": "^6.0.2",
+    "@angular/common": "^6.0.2",
+    "@angular/compiler": "^6.0.2",
+    "@angular/core": "^6.0.2",
+    "@angular/forms": "^6.0.2",
+    "@angular/http": "^6.0.2",
+    "@angular/material": "^6.0.2",
+    "@angular/platform-browser": "^6.0.2",
+    "@angular/platform-browser-dynamic": "^6.0.2",
+    "@angular/platform-server": "^6.0.2",
+    "core-js": "^2.5.1",
+    "ng-recaptcha": "../ng-recaptcha-latest.tgz",
+    "rxjs": "^6.1.0",
+    "zone.js": "^0.8.26"
+  },
+  "devDependencies": {
+    "@angular/cli": "^6.0.1",
+    "@angular/compiler-cli": "^6.0.2",
+    "@ngtools/webpack": "^1.9.2",
+    "@types/extract-text-webpack-plugin": "^3.0.0",
+    "@types/webpack": "^3.8.1",
+    "angular2-template-loader": "^0.6.2",
+    "copy-webpack-plugin": "^4.1.1",
+    "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "file-loader": "^1.1.6",
+    "highlight-loader": "^0.7.2",
+    "html-loader": "^0.5.1",
+    "html-webpack-plugin": "^2.30.1",
+    "http-server": "^0.10.0",
+    "npm-run-all": "^4.1.2",
+    "raw-loader": "^0.5.1",
+    "rimraf": "^2.6.2",
+    "source-map-explorer": "^1.5.0",
+    "style-loader": "^0.19.0",
+    "to-string-loader": "^1.1.5",
+    "ts-node": "^4.1.0",
+    "typescript": "~2.7.2",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.7"
+  }
+}

demo-v6/src/app/demo-wrapper/demo-wrapper.component.ts

@@ -0,0 +1,64 @@
+import { MediaMatcher } from '@angular/cdk/layout'; // tslint:disable-line:no-submodule-imports
+import { ChangeDetectorRef, Component, Inject, InjectionToken, OnDestroy, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+
+export interface PageSettings {
+  title: string;
+  feature: string;
+  content: {
+    html: string;
+    component: string;
+    module: string;
+    additional?: {
+      title: string;
+      type: string;
+      content: string;
+    }
+  };
+}
+export interface NavLink {
+  label: string;
+  path: string;
+  feature: string;
+}
+export const PAGE_SETTINGS = new InjectionToken<PageSettings>('PAGE_SETTINGS');
+export const NAV_LINKS = new InjectionToken<NavLink[]>('NAV_LINKS');
+
+@Component({
+  selector: 'recaptcha-demo-wrapper',
+  styleUrls: [
+    './recaptcha-demo-wrapper.component.css',
+  ],
+  templateUrl: './recaptcha-demo-wrapper.component.html',
+})
+export class DemoWrapperComponent implements OnInit, OnDestroy {
+  public site = {
+    title: 'ng-recaptcha',
+    description: 'Angular component for Google reCAPTCHA',
+    baseurl: '/ng-recaptcha',
+  };
+  public mobileQuery: MediaQueryList;
+  public sidebarOpened: boolean = false;
+
+  private mobileQueryListener: () => void;
+
+  constructor(
+    @Inject(PAGE_SETTINGS) public page: PageSettings,
+    @Inject(NAV_LINKS) public navLinks: NavLink[],
+    private titleService: Title,
+    media: MediaMatcher,
+    changeDetectorRef: ChangeDetectorRef,
+  ) {
+    this.mobileQuery = media.matchMedia('(max-width: 600px)');
+    this.mobileQueryListener = () => changeDetectorRef.detectChanges();
+    this.mobileQuery.addListener(this.mobileQueryListener);
+  }
+
+  public ngOnInit() {
+    this.titleService.setTitle(`${this.page.title} | ${this.site.title}`);
+  }
+
+  public ngOnDestroy(): void {
+    this.mobileQuery.removeListener(this.mobileQueryListener);
+  }
+}

demo-v6/src/app/demo-wrapper/demo-wrapper.module.ts

@@ -0,0 +1,38 @@
+import { LayoutModule } from '@angular/cdk/layout'; // tslint:disable-line:no-submodule-imports
+import { NgModule } from '@angular/core';
+import {
+  MatButtonModule,
+  MatIconModule,
+  MatListModule,
+  MatSidenavModule,
+  MatTabsModule,
+  MatToolbarModule,
+} from '@angular/material';
+import { BrowserModule } from '@angular/platform-browser';
+// tslint:disable-next-line:no-submodule-imports
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DemoWrapperComponent, NAV_LINKS } from './demo-wrapper.component';
+import { navLinks } from './demo-wrapper.data.auto-gen';
+
+@NgModule({
+  declarations: [DemoWrapperComponent],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatSidenavModule,
+    MatListModule,
+    LayoutModule,
+  ],
+  exports: [
+    DemoWrapperComponent,
+  ],
+  providers: [
+    { provide: NAV_LINKS, useValue: navLinks },
+  ],
+})
+export class DemoWrapperModule { }