amir-input 9.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/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,5 @@
+
+
+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": "amir-input",
+  "version": "9.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,46 @@
+
+
+
+.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;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/app/app.component.html

@@ -0,0 +1,96 @@
+<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" autocomplete="off">
+        </div>
+
+        <div class="form-row">
+            <label>Email:</label>
+
+            <au-fa-input id="email-field" icon="envelope">
+                <input type="email" name="email" placeholder="Email" autocomplete="off" class="test-class">
+            </au-fa-input>
+
+        </div>
+
+        <div class="form-row">
+            <label>Password:</label>
+            <au-fa-input id="password-field" icon="lock" >
+                <input placeholder="Password" class="test-class">
+            </au-fa-input>
+        </div>
+
+        <div class="form-row stripe-field">
+            <label>Stripe:</label>
+            <au-fa-input  icon="cc-stripe">
+                <input placeholder="Stripe">
+            </au-fa-input>
+        </div>
+
+        <div class="form-row">
+            <label>Paypal:</label>
+            <au-fa-input icon="paypal">
+                <input placeholder="Paypal">
+            </au-fa-input>
+        </div>
+
+        <h1>Material Design</h1>
+
+        <div class="form-row">
+            <label>Lock:</label>
+            <au-md-input icon="search">
+                <input type="email" name="email" placeholder="E-mail">
+            </au-md-input>
+        </div>
+
+        <div class="form-row">
+            <label>Id Number:</label>
+            <au-md-input icon="perm_identity">
+                <input type="email" name="email" placeholder="E-mail">
+            </au-md-input>
+        </div>
+
+        <div class="form-row">
+            <label>Receipt Number:</label>
+            <au-md-input icon="receipt">
+                <input type="email" name="email" placeholder="E-mail">
+            </au-md-input>
+        </div>
+
+
+    </div>
+
+</div>
+
+</body>
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,56 @@
+import {TestBed, async, ComponentFixture} from '@angular/core/testing';
+import {AppComponent} from './app.component';
+import {DebugElement} from '@angular/core';
+import {By}              from '@angular/platform-browser';
+import {AuInputModule} from "./lib/au-input.module";
+
+describe('AppComponent', () => {
+
+    let component: AppComponent,
+        fixture: ComponentFixture<AppComponent>,
+        el: DebugElement,
+        emailField: DebugElement;
+
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                AppComponent
+            ],
+            imports:[AuInputModule]
+        }).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 test application', async(() => {
+        expect(component).toBeTruthy();
+    }));
+
+
+    it('should create a font awesome email input', async(() => {
+        expect(emailField).toBeTruthy();
+
+    }));
+
+    it('should include the correct email icon inside the email input', async(() => {
+        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'))).toBeTruthy();
+    }));
+
+
+
+});

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 {AuInputModule} from "./lib/au-input.module";
+import {HttpClientModule} from "@angular/common/http";
+
+
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+     AuInputModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

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

@@ -0,0 +1,17 @@
+
+$border-color: red;
+
+:host-context(.au-fa-input-red-theme) {
+
+  border-color: $border-color;
+
+
+  &.input-focus {
+    -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.css

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

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

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

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

@@ -0,0 +1,40 @@
+import {Component, Input, ContentChild, AfterContentInit, HostBinding, 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.css']
+})
+export class AuFaInputComponent implements AfterContentInit {
+
+    @Input()
+    icon: string;
+
+    @ContentChild(InputRefDirective,{static:false})
+    input: InputRefDirective;
+
+    ngAfterContentInit() {
+        if (!this.input) {
+            console.error('the au-fa-input needs an input inside its content');
+        }
+    }
+
+    @HostBinding('class.input-focus')
+    get isInputFocus() {
+        return this.input ? this.input.focus : false;
+    }
+
+
+    get classes() {
+
+        const cssClasses = {};
+
+        if (this.icon) {
+            cssClasses['fa-' + this.icon] = true;
+        }
+
+        return cssClasses;
+    }
+
+}

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

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

package/src/app/lib/au-md-input/au-md-input.component.css

@@ -0,0 +1,10 @@
+
+@import "../common/common.css";
+
+@import "../common/_default-theme.scss";
+
+.md-icon {
+    line-height: 21px;
+    vertical-align: middle;
+}
+

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

@@ -0,0 +1,8 @@
+
+<i class="md-icon" [innerHtml]="icon"></i>
+
+
+<ng-content></ng-content>
+
+
+

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

@@ -0,0 +1,30 @@
+import {Component, Input, OnInit, ContentChild, AfterContentInit, HostBinding} from '@angular/core';
+import {InputRefDirective} from "../common/input-ref.directive";
+
+
+@Component({
+    selector: 'au-md-input',
+    templateUrl: './au-md-input.component.html',
+    styleUrls: ['./au-md-input.component.css']
+})
+export class AuMdInputComponent implements AfterContentInit {
+
+    @Input()
+    icon: string;
+
+    @ContentChild(InputRefDirective, {static:false})
+    input: InputRefDirective;
+
+    ngAfterContentInit() {
+        if (!this.input) {
+            console.error("the au-md-input needs an input inside its content");
+        }
+    }
+
+    @HostBinding('class.input-focus')
+    get isInputFocus() {
+        return this.input ? this.input.focus : false;
+    }
+
+
+}

package/src/app/lib/common/_default-theme.scss

@@ -0,0 +1,11 @@
+
+:host {
+  background: white;
+  border-color: lightgray;
+}
+
+:host(.input-focus) {
+  border-color: #4D90FE;
+  -webkit-box-shadow: 0px 0px 5px  #4D90FE;
+  box-shadow: 0px 0px 5px  #4D90FE;
+}