Many improvements

.angular-cli.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "material-time-control"
+  },
+  "apps": [
+    {
+      "root": "demo",
+      "outDir": "demo-dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.scss"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "component": {}
+  }
+}

.gitignore

@@ -1,3 +1,5 @@
 
 dist/
 node_modules/
+yarn.lock
+.vscode

README.md

@@ -1,29 +1,55 @@
 # Material Time Control
 
-A simple time picker component using angular/material2 (5.0.0-rc0).<br/>
-While this component only shows a 12 hour clock it can easily be extended to show 12/24 mode.<br/>
-The main focus here a button beside a normal textbox that opens a dialog to select your hour, minute and meridan.
-<br/><br/>
-I didn't focus on any responsive layouts as the only place I needed this was desktop but since it leverages flex throughout, it could be modified to change orientation in portrait phone mode.
-<br/><br/>
-See a demo with this stackblitz -> https://stackblitz.com/edit/angular-material2-time-picker
-<br/><br/>
+A simple time picker component using angular/material2 (5.0.0-rc0).  
+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.  
+
+See a demo with this stackblitz -> https://stackblitz.com/edit/material-time-control  
+
 Enjoy!
 
-![Dialog Hours](https://github.com/SteveDunlap13/MaterialTimeControl/blob/master/src/assets/images/OpenDialog_Hours.png)
-![Dialog Minutes](https://github.com/SteveDunlap13/MaterialTimeControl/blob/master/src/assets/images/OpenDialog_Minutes.png)
+![Dialog Hours](./demo/assets/OpenDialog_Hours.png?raw=true)
+![Dialog Minutes](./demo/assets/OpenDialog_Minutes.png?raw=true)
 
+## Install
+
+```
+yarn add SteveDunlap13/MaterialTimeControl
+```
+or
+```
+npm install SteveDunlap13/MaterialTimeControl
+```
 
 ## Getting Started
 
-To run this demo, npm install then np start<br/>
-webpack-dev-server will fire up on port 3000
+To run this demo, run
+
+```
+npm install
+npm start
+```
+or
+```
+yarn install
+yarn start
+```
+
+and open http://localhost:4200/ in your browser.
+
+## Build
+
+To build the module run
+
+```
+tsc
+```
 
 ### Prerequisites
 
-Required:<br/>
-normal angular packages 5.0.1<br/>
-"@angular/material": "^5.0.0-rc0"<br/>
+Required:  
+normal angular packages 5.0.1  
+"@angular/material": "^5.0.0"  
 "@angular/flex-layout": "^2.0.0-beta.10-4905443"
 
 

demo/app/app.component.html

@@ -0,0 +1,23 @@
+<div class="container">
+  <form class="demo-form">
+    <w-mat-timepicker color="primary" [(userTime)]="exportTime"></w-mat-timepicker>
+  </form>
+</div>
+
+<mat-card>
+  <mat-card-content>
+      <w-time color="primary" [(userTime)]="exportTime"></w-time>
+  </mat-card-content>
+</mat-card>
+
+<mat-card>
+  <mat-card-content>
+      <w-time color="accent" [(userTime)]="exportTime" revertLabel="Revert" submitLabel="Submit"></w-time>
+  </mat-card-content>
+</mat-card>
+
+<mat-card>
+  <mat-card-content>
+      <w-time color="warn" [(userTime)]="exportTime"></w-time>
+  </mat-card-content>
+</mat-card>

demo/app/app.component.scss

@@ -0,0 +1,24 @@
+.container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  position: relative;
+  margin: 1em;
+}
+
+.demo-form {
+  padding: 4em;
+}
+
+.mat-card {
+  padding: 0;
+  max-width: 600px;
+  margin: 3rem auto;
+}

demo/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  private exportTime = {hour: 7, minute: 15, meriden: 'PM'};
+}

demo/app/app.module.ts

@@ -0,0 +1,27 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+
+
+import { AppComponent } from './app.component';
+
+import { MaterialTimeControlModule } from '../../src/material-time-control.module';
+
+import {
+  MatCardModule,
+} from '@angular/material';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    MaterialTimeControlModule,
+    MatCardModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

demo/environments/environment.prod.ts

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

demo/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
+};

demo/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>MaterialTimeControl</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">  
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>