tigascorreia-input 1.0.0

package/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/README.md

@@ -0,0 +1,28 @@
+# AuSvgButton
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.1.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package/angular.json

@@ -0,0 +1,128 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "au-input": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "au-input:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "au-input:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "au-input:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "au-input-e2e": {
+      "root": "",
+      "sourceRoot": "",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "au-input:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "au-input",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": ""
+    }
+  }
+}

package/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'.

package/index.ts

@@ -0,0 +1 @@
+export {AuInputModule} from "./src/app/lib/au-input.module";

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      
+    ],
+    preprocessors: {
+      
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "tigascorreia-input",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "8.0.0",
+    "@angular/common": "8.0.0",
+    "@angular/compiler": "8.0.0",
+    "@angular/core": "8.0.0",
+    "@angular/forms": "8.0.0",
+    "@angular/platform-browser": "8.0.0",
+    "@angular/platform-browser-dynamic": "8.0.0",
+    "@angular/router": "8.0.0",
+    "core-js": "^2.4.1",
+    "rxjs": "6.5.2",
+    "zone.js": "~0.9.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.800.0",
+    "@angular/cli": "^8.0.1",
+    "@angular/compiler-cli": "8.0.0",
+    "@angular/language-service": "8.0.0",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "^5.0.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "^4.1.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.7.0",
+    "typescript": "~3.4.5"
+  }
+}

package/protractor.conf.js

@@ -0,0 +1,30 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

package/src/app/app.component.css

@@ -0,0 +1,36 @@
+
+.container {
+  margin: 0 auto;
+  max-width: 300px;
+  padding-top:65px;
+}
+
+label {
+  width: 100px;
+  text-align: right;
+}
+
+.form-row {
+  width:500px;
+  margin-bottom: 10px;
+}
+
+
+input {
+  height: 25px;
+}
+
+.normal-input {
+    width:150px;
+}
+
+h1 {
+  text-align: center;
+  margin-bottom: 30px;
+  margin-top: 50px;
+}
+
+au-fa-input {
+  height: 30px;
+}
+

package/src/app/app.component.html

@@ -0,0 +1,55 @@
+<header class="l-header">
+  <ul class="top-menu disable-link-styles">
+    <li class="logo-small-container">
+      <a class="v-center-block-parent">
+        <img class="v-center-block logo-small angular-university-logo"
+             src="https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png"
+             data-pin-nopin="true">
+      </a>
+    </li>
+    <li>
+      <a>Inputs</a>
+    </li>
+  </ul>
+</header>
+
+<body>
+<div class="container">
+  <h1>Font Awesome</h1>
+
+  <div class="form"> 
+  <div class="form-row ">
+      <label>Normal Input:</label>
+      <input class="normal-input" type="email" name="email" placeholder="E-mail">
+  </div>
+  <div class="form-row au-fa-input-red-theme">
+      <label>Email: </label>
+      <au-fa-input id="email-field" icon="envelope" placeholder="E-mail">
+        <input #input placeholder="E-mail" class="test-class">
+      </au-fa-input>
+  </div>
+  <div class="form-row">
+      <label>Password:</label>
+      <au-fa-input id="password-field" icon="lock" placeholder="Password">
+        <input #input placeholder="Password" type="password" class="test-class">
+      </au-fa-input>
+  </div>
+  <div class="form-row">
+      <label>Stripe:</label>
+      <au-fa-input id="stripe-field" icon="cc-stripe" placeholder="Stripe">
+        <input #input placeholder="Stripe">
+      </au-fa-input>
+  </div>
+
+  <div class="form-row">
+      <label>Paypal:</label>
+      <au-fa-input id="paypal-field" icon="paypal" placeholder="Paypal">
+        <input #input placeholder="Paypal">
+      </au-fa-input>
+  </div>
+</div>
+
+</div>
+
+</body>
+

package/src/app/app.component.spec.ts

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+import { AuFaInputComponent } from './lib/au-fa-input/au-fa-input.component';
+import { InputRefDirective } from './lib/common/input-ref.directive';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+describe('AppComponent', () => {
+    let component: AppComponent,
+        fixture: ComponentFixture<AppComponent>,
+        el: DebugElement,
+        emailField: DebugElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                AppComponent, AuFaInputComponent, InputRefDirective
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AppComponent);
+        component = fixture.debugElement.componentInstance;
+        el = fixture.debugElement;
+        emailField = el.query(By.css('#email-field'));
+        fixture.detectChanges();
+    })
+
+    it('should create the app', async(() => {
+        expect(component).toBeTruthy();
+    }));
+
+    it('should create a font awsome email input', async(() => {
+        const emailField = el.query(By.css('#email-field'));
+        
+        expect(emailField).toBeTruthy();
+    }));
+
+    it('should  inclue the correct email icon inside the email input', async(() => {
+        console.warn(emailField.nativeElement);
+        expect(emailField.query(By.css('i.icon.fa.fa-envelope'))).toBeTruthy();
+    }));
+
+    it('should have projected the correct test input inside the email field', async(() => {
+        expect(emailField.query(By.css('input.test-class')));
+    }));
+});

package/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app works!';
+}

package/src/app/app.module.ts

@@ -0,0 +1,24 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AppComponent } from './app.component';
+
+import {HttpClientModule} from "@angular/common/http";
+import { AuFaInputComponent } from './lib/au-fa-input/au-fa-input.component';
+import { InputRefDirective } from './lib/common/input-ref.directive';
+import { AuInputModule } from './lib/au-input.module';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    AuInputModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

package/src/app/lib/au-fa-input/_au-fa-input-default-theme.scss

@@ -0,0 +1,17 @@
+
+:host{
+    background: white;
+    border-color: lightgray;
+}
+
+$border-color: dodgerblue;
+
+:host-context{
+    
+
+    &.input-focus{
+        border-color: $border-color;
+        -webkit-box-shadow: 0px 0px 5px $border-color;
+        box-shadow: 0px 0px 5px $border-color;
+    }
+}

package/src/app/lib/au-fa-input/_au-fa-input-red-theme.scss

@@ -0,0 +1,11 @@
+$border-color: red;
+
+:host-context(.au-fa-input-red-theme) {
+    
+
+    &.input-focus{
+        border-color: $border-color;
+        -webkit-box-shadow: 0px 0px 5px $border-color;
+        box-shadow: 0px 0px 5px $border-color;
+    }
+}

package/src/app/lib/au-fa-input/au-fa-input.component.html

@@ -0,0 +1,2 @@
+<i class="icon fa" [ngClass]="classes"></i>
+<ng-content></ng-content>

package/src/app/lib/au-fa-input/au-fa-input.component.scss

@@ -0,0 +1,3 @@
+@import "../common/common.css";
+@import "_au-fa-input-red-theme.scss";
+@import "_au-fa-input-default-theme.scss";

package/src/app/lib/au-fa-input/au-fa-input.component.spec.ts

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

package/src/app/lib/au-fa-input/au-fa-input.component.ts

@@ -0,0 +1,39 @@
+import { AfterContentInit, Component, ContentChild, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { InputRefDirective } from '../common/input-ref.directive';
+
+@Component({
+  selector: 'au-fa-input',
+  templateUrl: './au-fa-input.component.html',
+  styleUrls: ['./au-fa-input.component.scss']
+})
+export class AuFaInputComponent implements OnInit, AfterContentInit{
+  @Input()
+  icon: string;
+  
+  @ContentChild(InputRefDirective, {static: false})
+  input: InputRefDirective;
+
+  constructor() { }
+
+  ngOnInit() {} 
+
+  get classes() {
+    const cssClasses = {
+    }
+
+    if (this.icon) {
+      cssClasses[`fa-` + this.icon] = true
+    }
+
+    return cssClasses;
+  }
+
+  ngAfterContentInit(): void {
+    console.log(this.input);
+  }
+
+  @HostBinding('class.input-focus')
+  get isInputFocus() {
+    return this.input ? this.input.focus : false;
+  }
+}

package/src/app/lib/au-input.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+import { AuFaInputComponent } from "./au-fa-input/au-fa-input.component";
+import { InputRefDirective } from "./common/input-ref.directive";
+import { CommonModule } from "@angular/common";
+
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: [AuFaInputComponent, InputRefDirective],
+    exports:[AuFaInputComponent, InputRefDirective]
+})
+export class AuInputModule{
+
+}

package/src/app/lib/common/common.css

@@ -0,0 +1,27 @@
+
+.icon{
+    width: 20px;
+    text-align: center;
+    padding-left: 5px;
+    padding-right: 2px;
+    border: none;
+}
+
+:host{
+    border-width: 1px;
+    border-style: solid;
+    padding: 1px 0;
+    display: inline-block;
+}
+
+:host(.input-focus){
+    outline: none;
+}
+
+:host ::ng-deep input{
+    border: none;
+    outline: none;
+    height: 100%;
+    margin: 1px 0;
+    box-sizing: border-box;
+}

package/src/app/lib/common/input-ref.directive.spec.ts

@@ -0,0 +1,8 @@
+import { InputRefDirective } from './input-ref.directive';
+
+describe('InputRefDirective', () => {
+  it('should create an instance', () => {
+    const directive = new InputRefDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/src/app/lib/common/input-ref.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: 'au-fa-input input', 
+})
+export class InputRefDirective {
+  focus = false;
+
+  constructor() { }
+
+  @HostListener('focus')
+  onFocus(){
+    this.focus = true;
+  }
+  
+  @HostListener('blur')
+  onBlur(){
+    this.focus = false;
+  }
+}

package/src/environments/environment.prod.ts

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

package/src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

package/src/index.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Angular Advanced: The Angular Library Laboratory - Build Your Own Library </title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+
+  <link rel="stylesheet" href="https://angular-academy.s3.amazonaws.com/bundles/bundle.20170214122720.min.css" >
+
+  <style>
+
+    /*
+    .au-fa-input.override[css] {
+      display: block;
+    }
+
+    */
+
+  </style>
+
+</head>
+<body>
+
+  <app-root>Loading...</app-root>
+
+</body>
+</html>

package/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

package/src/polyfills.ts

@@ -0,0 +1,68 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.

package/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package/src/test.ts

@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

package/src/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/src/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/src/typings.d.ts

@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "module": "esnext",
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2016",
+      "dom"
+    ]
+  }
+}

package/tslint.json

@@ -0,0 +1,116 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [true],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [true, "ignore-params"],
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "typeof-compare": true,
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}