upgrade to Angular 6, improvements to the input field

README.md

@@ -1,6 +1,6 @@
 # Material Time Control
 
-A simple time picker component using angular/material2 (5.0.0-rc0).  
+A simple time picker component using angular/material2 (6.3.0).  
 While this component only shows a 12 hour clock it can easily be extended to show 12/24 mode.  
 The main focus here a button beside a normal textbox that opens a dialog to select your hour, minute and meridan.  
 
@@ -45,12 +45,65 @@ To build the module run
 tsc
 ```
 
+### Usage
+##### Tag:
+```
+<w-mat-timepicker> </w-mat-timepicker>
+```
+##### Attributes
+###### color:
+```
+color
+```
+
+###### default time:
+```
+userTime
+```
+
+###### position of the icon:
+```
+position
+```
+```
+default: left
+
+values:
+  right -> right of input filed
+  left -> left of input filed
+  inside -> inside the input filed 
+```
+
+###### translation for the placeholder at input field:
+```
+selectTime
+```
+```
+default: 'Select time'
+```
+
+###### translation for the submit button:
+```
+submit
+```
+```
+default: 'Okay'
+```
+
+###### translation for the submit button:
+```
+revert
+```
+```
+default: 'Cancel'
+```
+
 ### Prerequisites
 
 Required:  
-normal angular packages 5.0.1  
-"@angular/material": "^5.0.0"  
-"@angular/flex-layout": "^2.0.0-beta.10-4905443"
+normal angular packages 6.0.6  
+"@angular/material": "^6.3.0"  
+"@angular/flex-layout": "6.0.0-beta.16"
 
 
 ## License

angular.json

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

demo/app/app.component.html

@@ -20,4 +20,4 @@
   <mat-card-content>
       <w-time color="warn" [(userTime)]="exportTime"></w-time>
   </mat-card-content>
-</mat-card>
+</mat-card>

demo/app/app.component.scss

@@ -21,4 +21,4 @@
   padding: 0;
   max-width: 600px;
   margin: 3rem auto;
-}
+}

demo/tsconfig.spec.json

@@ -11,7 +11,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",

karma.conf.js

@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/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
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};