From 7af0820dd31a8bc9b48c6ec7d883fe8d2cc34c4b Mon Sep 17 00:00:00 2001
From: jerome <j.vanbersy@comaseinfo.be>
Date: Tue, 17 Apr 2018 14:03:35 +0200
Subject: [PATCH] module created, added min & max abilities, 24hours time
 format now displayed on 2 circles, every minute is now selectable within the
 minutes clock

---
 .../material-time-control.module.ts           |  54 +++++
 .../w-clock/w-clock.component.html            |   5 +-
 .../w-clock/w-clock.component.scss            | 176 +++++++++++++-
 src/time-control/w-clock/w-clock.component.ts | 215 ++++++++++--------
 .../w-mat-timepicker.component.html           |  21 +-
 .../w-mat-timepicker.component.scss           |   7 +-
 .../w-mat-timepicker.component.ts             | 188 ++++++++-------
 .../w-time-dialog.component.html              |   2 +-
 .../w-time-dialog/w-time-dialog.component.ts  |  13 +-
 src/time-control/w-time/w-time.component.html |   2 +-
 src/time-control/w-time/w-time.component.ts   |  18 +-
 11 files changed, 501 insertions(+), 200 deletions(-)
 create mode 100644 src/time-control/material-time-control.module.ts

diff --git a/src/time-control/material-time-control.module.ts b/src/time-control/material-time-control.module.ts
new file mode 100644
index 0000000..29d7b7e
--- /dev/null
+++ b/src/time-control/material-time-control.module.ts
@@ -0,0 +1,54 @@
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import {
+    MatButtonModule, MatButtonToggleModule,
+    MatDialogModule, MatIconModule, MatInputModule,
+    MatSelectModule, MatToolbarModule,
+    MatFormFieldModule
+} from '@angular/material';
+
+import {
+  WMatTimePickerComponent,
+  WTimeDialogComponent,
+  WClockComponent,
+  WTimeComponent
+} from './';
+
+
+@NgModule({
+  declarations: [
+    WMatTimePickerComponent,
+    WTimeDialogComponent,
+    WClockComponent,
+    WTimeComponent,
+  ],
+  imports: [
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    MatToolbarModule,
+    CommonModule,
+    FlexLayoutModule,
+  ],
+  exports: [
+    WMatTimePickerComponent,
+    WTimeDialogComponent,
+    WClockComponent,
+    WTimeComponent,
+  ],
+  entryComponents: [
+    WMatTimePickerComponent,
+    WTimeDialogComponent,
+    WClockComponent,
+    WTimeComponent,
+  ]
+})
+
+export class MaterialTimeControlModule { }
diff --git a/src/time-control/w-clock/w-clock.component.html b/src/time-control/w-clock/w-clock.component.html
index 5eba2e2..a720f28 100644
--- a/src/time-control/w-clock/w-clock.component.html
+++ b/src/time-control/w-clock/w-clock.component.html
@@ -14,8 +14,9 @@
             <div *ngFor="let step of steps; let i = index" [class]="getTimeValueClass(step, i)" >
                 <button mat-mini-fab
                     [color]="selectedTimePart === step ? color : ''"
-                    (click)="changeTimeValue(step)">
-                    {{ step }}
+                    (click)="changeTimeValue(step)"
+                    [disabled]="disabledTimeValue(step)">
+                    {{ displayStep(step) }}
                 </button>
             </div>
 
diff --git a/src/time-control/w-clock/w-clock.component.scss b/src/time-control/w-clock/w-clock.component.scss
index fb95acc..a0e227a 100644
--- a/src/time-control/w-clock/w-clock.component.scss
+++ b/src/time-control/w-clock/w-clock.component.scss
@@ -50,6 +50,20 @@
         background-color: transparent;
       }
     }
+    .w-clock-step.smaller {
+      width: 20px;
+      height: 20px;
+      overflow: hidden;
+      /deep/ .mat-mini-fab {
+        width: 20px;
+        height: 20px;
+        .mat-button-wrapper {
+          padding: 0;
+          position: relative;
+          top: -8px;
+        }
+      }
+    }
     .w-clock-selected {
       position: absolute;
       bottom: -19px;
@@ -67,123 +81,281 @@
   top: 0%;
   left: 50%;
 }
+.w-clock-deg0.inside {
+  top: 20%;
+}
 
 .w-clock-deg15 {
   top: 1.70370869%;
   left: 62.94095226%;
 }
+.w-clock-deg15.inside {
+  top: 21.0222252113%;
+  left: 57.7645713531%;
+}
 
 .w-clock-deg30 {
   top: 6.69872981%;
   left: 75%;
 }
+.w-clock-deg30.inside {
+  top: 24.0192378865%;
+  left: 65%;
+}
 
 .w-clock-deg45 {
   top: 14.64466094%;
   left: 85.35533905%;
 }
+.w-clock-deg45.inside {
+  top: 28.7867965644%;
+  left: 71.2132034356%;
+}
 
 .w-clock-deg60 {
   top: 25%;
   left: 93.30127019%;
 }
+.w-clock-deg60.inside {
+  top: 35%;
+  left: 75.9807621135%;
+}
 
 .w-clock-deg75 {
   top: 37.05904774%;
   left: 98.29629131%;
 }
+.w-clock-deg75.inside {
+  top: 42.2354286469%;
+  left: 78.9777747887%;
+}
 
 .w-clock-deg90 {
   top: 50%;
   left: 100%;
 }
+.w-clock-deg90.inside {
+  top: 50%;
+  left: 80%;
+}
 
 .w-clock-deg105 {
   top: 62.94095226%;
   left: 98.29629131%;
 }
+.w-clock-deg105.inside {
+  top: 57.7645713531%;
+  left: 78.9777747887%;
+}
 
 .w-clock-deg120 {
   top: 75%;
   left: 93.30127019%;
 }
+.w-clock-deg120.inside {
+  top: 65%;
+  left: 75.9807621135%;
+}
 
 .w-clock-deg135 {
   top: 85.35533906%;
   left: 85.35533906%;
 }
+.w-clock-deg135.inside {
+  top: 71.2132034356%;
+  left: 71.2132034356%;
+}
 
 .w-clock-deg150 {
   top: 93.30127019%;
   left: 75%;
 }
+.w-clock-deg150.inside {
+  top: 75.9807621135%;
+  left: 65%;
+}
 
 .w-clock-deg165 {
   top: 98.29629131%;
   left: 62.94095226%;
 }
+.w-clock-deg165.inside {
+  top: 78.9777747887%;
+  left: 57.7645713531%;
+}
 
 .w-clock-deg180 {
   top: 100%;
   left: 50%;
 }
+.w-clock-deg180.inside {
+  top: 80%;
+}
 
 .w-clock-deg195 {
   top: 98.29629131%;
   left: 37.05904774%;
 }
+.w-clock-deg195.inside {
+  top: 78.9777747887%;
+  left: 42.2354286469%;
+}
 
 .w-clock-deg210 {
   top: 93.30127019%;
-  left: 25%;
+  left: 20%;
+}
+.w-clock-deg210.inside {
+  top: 75.9807621135%;
+  left: 35%;
 }
 
 .w-clock-deg225 {
   top: 85.35533906%;
   left: 14.64466094%;
 }
+.w-clock-deg225.inside {
+  top: 71.2132034356%;
+  left: 28.7867965644%;
+}
 
 .w-clock-deg240 {
   top: 75%;
   left: 6.69872981%;
 }
+.w-clock-deg240.inside {
+  top: 65%;
+  left: 24.0192378865%;
+}
 
 .w-clock-deg255 {
   top: 62.94095226%;
   left: 1.703708686%;
 }
+.w-clock-deg255.inside {
+  top: 57.7645713531%;
+  left: 21.0222252113%;
+}
 
 .w-clock-deg270 {
   top: 50%;
   left: 0%;
 }
+.w-clock-deg270.inside {
+  top: 50%;
+  left: 20%;
+}
 
 .w-clock-deg285 {
   top: 37.05904774%;
   left: 1.703708686%;
 }
+.w-clock-deg285.inside {
+  top: 42.2354286469%;
+  left: 21.0222252113%;
+}
 
 .w-clock-deg300 {
   top: 25%;
   left: 6.69872981%;
 }
+.w-clock-deg300.inside {
+  top: 35%;
+  left: 24.0192378865%;
+}
 
 .w-clock-deg315 {
   top: 14.64466094%;
   left: 14.64466094%;
 }
+.w-clock-deg315.inside {
+  top: 28.7867965644%;
+  left: 28.7867965644%;
+}
 
 .w-clock-deg330 {
   top: 6.69872981%;
   left: 25%;
 }
+.w-clock-deg330.inside {
+  top: 24.0192378865%;
+  left: 35%;
+}
 
 .w-clock-deg345 {
   top: 1.703708686%;
   left: 37.05904774%;
 }
+.w-clock-deg345.inside {
+  top: 21.0222252113%;
+  left: 42.2354286469%;
+}
 
 .w-clock-deg360 {
   top: 0%;
   left: 50%;
-}
\ No newline at end of file
+}
+.w-clock-deg360.inside {
+  top: 20%;
+}
+
+/* For every minute */
+.w-clock-deg6 {top: 0.27390523158633%; left: 55.226423163383%;}
+.w-clock-deg12 {top: 1.0926199633097%; left: 60.395584540888%;}
+.w-clock-deg18 {top: 2.4471741852423%; left: 65.450849718747%;}
+.w-clock-deg24 {top: 4.32272711787%; left: 70.33683215379%;}
+.w-clock-deg30 {top: 6.6987298107781%; left: 75%;}
+.w-clock-deg36 {top: 9.5491502812526%; left: 79.389262614624%;}
+.w-clock-deg42 {top: 12.84275872613%; left: 83.456530317943%;}
+.w-clock-deg48 {top: 16.543469682057%; left: 87.15724127387%;}
+.w-clock-deg54 {top: 20.610737385376%; left: 90.450849718747%;}
+.w-clock-deg60 {top: 25%; left: 93.301270189222%;}
+.w-clock-deg66 {top: 29.66316784621%; left: 95.67727288213%;}
+.w-clock-deg72 {top: 34.549150281253%; left: 97.552825814758%;}
+.w-clock-deg78 {top: 39.604415459112%; left: 98.90738003669%;}
+.w-clock-deg84 {top: 44.773576836617%; left: 99.726094768414%;}
+.w-clock-deg90 {top: 50%; left: 100%;}
+.w-clock-deg96 {top: 55.226423163383%; left: 99.726094768414%;}
+.w-clock-deg102 {top: 60.395584540888%; left: 98.90738003669%;}
+.w-clock-deg108 {top: 65.450849718747%; left: 97.552825814758%;}
+.w-clock-deg114 {top: 70.33683215379%; left: 95.67727288213%;}
+.w-clock-deg120 {top: 75%; left: 93.301270189222%;}
+.w-clock-deg126 {top: 79.389262614624%; left: 90.450849718747%;}
+.w-clock-deg132 {top: 83.456530317943%; left: 87.15724127387%;}
+.w-clock-deg138 {top: 87.15724127387%; left: 83.456530317943%;}
+.w-clock-deg144 {top: 90.450849718747%; left: 79.389262614624%;}
+.w-clock-deg150 {top: 93.301270189222%; left: 75%;}
+.w-clock-deg156 {top: 95.67727288213%; left: 70.33683215379%;}
+.w-clock-deg162 {top: 97.552825814758%; left: 65.450849718747%;}
+.w-clock-deg168 {top: 98.90738003669%; left: 60.395584540888%;}
+.w-clock-deg174 {top: 99.726094768414%; left: 55.226423163383%;}
+.w-clock-deg180 {top: 100%; left: 50%;}
+.w-clock-deg186 {top: 99.726094768414%; left: 44.773576836617%;}
+.w-clock-deg192 {top: 98.90738003669%; left: 39.604415459112%;}
+.w-clock-deg198 {top: 97.552825814758%; left: 34.549150281253%;}
+.w-clock-deg204 {top: 95.67727288213%; left: 29.66316784621%;}
+.w-clock-deg210 {top: 93.301270189222%; left: 25%;}
+.w-clock-deg216 {top: 90.450849718747%; left: 20.610737385376%;}
+.w-clock-deg222 {top: 87.15724127387%; left: 16.543469682057%;}
+.w-clock-deg228 {top: 83.456530317943%; left: 12.84275872613%;}
+.w-clock-deg234 {top: 79.389262614624%; left: 9.5491502812526%;}
+.w-clock-deg240 {top: 75%; left: 6.6987298107781%;}
+.w-clock-deg246 {top: 70.33683215379%; left: 4.32272711787%;}
+.w-clock-deg252 {top: 65.450849718747%; left: 2.4471741852423%;}
+.w-clock-deg258 {top: 60.395584540888%; left: 1.0926199633097%;}
+.w-clock-deg264 {top: 55.226423163383%; left: 0.27390523158633%;}
+.w-clock-deg270 {top: 50%; left: 0%;}
+.w-clock-deg276 {top: 44.773576836617%; left: 0.27390523158633%;}
+.w-clock-deg282 {top: 39.604415459112%; left: 1.0926199633097%;}
+.w-clock-deg288 {top: 34.549150281253%; left: 2.4471741852423%;}
+.w-clock-deg294 {top: 29.66316784621%; left: 4.32272711787%;}
+.w-clock-deg300 {top: 25%; left: 6.6987298107781%;}
+.w-clock-deg306 {top: 20.610737385376%; left: 9.5491502812526%;}
+.w-clock-deg312 {top: 16.543469682057%; left: 12.84275872613%;}
+.w-clock-deg318 {top: 12.84275872613%; left: 16.543469682057%;}
+.w-clock-deg324 {top: 9.5491502812526%; left: 20.610737385376%;}
+.w-clock-deg330 {top: 6.6987298107781%; left: 25%;}
+.w-clock-deg336 {top: 4.32272711787%; left: 29.66316784621%;}
+.w-clock-deg342 {top: 2.4471741852423%; left: 34.549150281253%;}
+.w-clock-deg348 {top: 1.0926199633097%; left: 39.604415459112%;}
+.w-clock-deg354 {top: 0.27390523158633%; left: 44.773576836617%;}
diff --git a/src/time-control/w-clock/w-clock.component.ts b/src/time-control/w-clock/w-clock.component.ts
index 92e6797..db1ae75 100644
--- a/src/time-control/w-clock/w-clock.component.ts
+++ b/src/time-control/w-clock/w-clock.component.ts
@@ -1,142 +1,173 @@
-
-import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import {Component, OnInit, Input, Output, EventEmitter, OnChanges} from '@angular/core';
 
 // Current type to show
 export enum CLOCK_TYPE {
-    HOURS = 1,
-    MINUTES = 2
+  HOURS = 1,
+  MINUTES = 2
 }
 
 export type TimeFormat = 12 | 24;
 
 export interface ITime {
 
-    hour: number;
-    minute: number;
-    meriden: 'PM' | 'AM';
-    format: TimeFormat;
-};
+  hour: number;
+  minute: number;
+  meriden: 'PM' | 'AM';
+  format: TimeFormat;
+}
 
 @Component({
-    selector: 'w-clock',
-    styleUrls: ['./w-clock.component.scss'],
-    templateUrl: './w-clock.component.html'
+  selector: 'w-clock',
+  styleUrls: ['./w-clock.component.scss'],
+  templateUrl: './w-clock.component.html'
 })
 export class WClockComponent implements OnChanges {
 
-    @Input() public userTime: ITime;
-    @Output() public userTimeChange: EventEmitter<ITime> = new EventEmitter();
-
-    @Input() public currentView: CLOCK_TYPE;
-    @Output() public viewChange = new EventEmitter<CLOCK_TYPE>();
-
-    @Input() public color: string;
-
-    public steps = new Array<number>();
-    private selectedTimePart;
-    private STEP_DEG: number;
+  @Input() public userTime: ITime;
+  @Input() public minTime: ITime;
+  @Input() public maxTime: ITime;
+  @Output() public userTimeChange: EventEmitter<ITime> = new EventEmitter();
 
+  @Input() public currentView: CLOCK_TYPE;
+  @Output() public viewChange = new EventEmitter<CLOCK_TYPE>();
 
+  @Input() public color: string;
 
-    ngOnChanges() {
-
-        this.setupUI();
-    }
+  public steps = new Array<number>();
+  private selectedTimePart;
+  private STEP_DEG: number;
 
+  ngOnChanges() {
+    this.setupUI();
+  }
 
-    private setupUI() {
+  private setupUI() {
 
-        this.steps = new Array<number>();
+    this.steps = new Array<number>();
 
-        switch (this.currentView) {
+    switch (this.currentView) {
 
-            case CLOCK_TYPE.HOURS:
+      case CLOCK_TYPE.HOURS:
 
-                for (let i = 1; i <= this.userTime.format; i++) {
+        for (let i = 1; i <= this.userTime.format; i++) {
 
-                    this.steps.push(i);
-                    this.selectedTimePart = this.userTime.hour || 0;
+          this.steps.push(i);
+          this.selectedTimePart = this.userTime.hour || 0;
 
-                    if (this.selectedTimePart > this.userTime.format) {
+          if (this.selectedTimePart > this.userTime.format) {
 
-                        this.selectedTimePart -= this.userTime.format;
-                    }
-                }
-                break;
+            this.selectedTimePart -= this.userTime.format;
+          }
+        }
+        break;
 
-            case CLOCK_TYPE.MINUTES:
+      case CLOCK_TYPE.MINUTES:
 
-                for (let i = 5; i <= 55; i += 5) {
+        for (let i = 1; i <= 59; i += 1) {
 
-                    this.steps.push(i);
-                }
-                this.steps.push(0);
-                this.selectedTimePart = this.userTime.minute || 0;
-                break;
+          this.steps.push(i);
         }
+        this.steps.push(0);
+        this.selectedTimePart = this.userTime.minute || 0;
+        break;
     }
+  }
 
-    public getPointerStyle() {
-
-        let divider = 1;
-        switch (this.currentView) {
-
-            case CLOCK_TYPE.HOURS:
-                divider = this.userTime.format;
-                break;
+  public getPointerStyle() {
 
-            case CLOCK_TYPE.MINUTES:
-                divider = 60;
-                break;
-        }
+    let divider = 1;
+    switch (this.currentView) {
 
-        let degrees = 0;
-        if (this.currentView === CLOCK_TYPE.HOURS) {
-            degrees = Math.round(this.userTime.hour * (360 / divider)) - 180;
-        } else {
-            degrees = Math.round(this.userTime.minute * (360 / divider)) - 180;
-        }
+      case CLOCK_TYPE.HOURS:
+        divider = 12; // this.userTime.format;
+        break;
 
-        const style = {
+      case CLOCK_TYPE.MINUTES:
+        divider = 60;
+        break;
+    }
 
-            '-webkit-transform': 'rotate(' + degrees + 'deg)',
-            '-ms-transform': 'rotate(' + degrees + 'deg)',
-            'transform': 'rotate(' + degrees + 'deg)'
-        };
+    let degrees = 0;
+    if (this.currentView === CLOCK_TYPE.HOURS) {
+      degrees = Math.round(this.userTime.hour * (360 / divider)) - 180;
+    } else {
+      degrees = Math.round(this.userTime.minute * (360 / divider)) - 180;
+    }
 
-        return style;
+    let style = {
+      '-webkit-transform': 'rotate(' + degrees + 'deg)',
+      '-ms-transform': 'rotate(' + degrees + 'deg)',
+      'transform': 'rotate(' + degrees + 'deg)'
+    };
+    if (this.currentView === CLOCK_TYPE.HOURS && this.userTime.hour <= 12) {
+      style = Object.assign(style, {height: '30%', bottom: '20%'});
     }
 
-    private getTimeValueClass(step: number, index: number) {
+    return style;
+  }
 
-        if (this.currentView === CLOCK_TYPE.HOURS) {
-            this.STEP_DEG = 360 / this.userTime.format;
-        } else {
-            this.STEP_DEG = 360 / 12;
-        }
-        let classes = 'w-clock-step w-clock-deg' + (this.STEP_DEG * (index + 1));
+  public disabledTimeValue(step: number): boolean {
+    if (!this.minTime && !this.maxTime) {
+      return false;
+    }
+    if (this.currentView === CLOCK_TYPE.HOURS) {
+      if (this.minTime && this.minTime.hour > step) {
+        return true;
+      }
+      return this.maxTime && this.maxTime.hour < step;
+    }
+    if (this.currentView === CLOCK_TYPE.MINUTES) {
+      if ((this.minTime && this.minTime.hour > this.userTime.hour) || (this.maxTime && this.maxTime.hour < this.userTime.hour)) {
+        return true;
+      }
+      if (this.minTime && this.maxTime && this.minTime.hour === this.userTime.hour && this.maxTime.hour === this.userTime.hour) {
+        return step < this.minTime.minute || step > this.maxTime.minute;
+      }
+      if (this.minTime && this.minTime.hour === this.userTime.hour) {
+        return step < this.minTime.minute;
+      }
+      if (this.maxTime && this.maxTime.hour === this.userTime.hour) {
+        return step > this.maxTime.minute;
+      }
+      return false;
+    }
+  }
 
-        if (this.selectedTimePart === step) {
+  public getTimeValueClass(step: number, index: number) {
+    // const stepDeg = this.currentView === CLOCK_TYPE.HOURS ? 360 / this.userTime.format : 360 / 12;
+    const stepDeg = this.currentView === CLOCK_TYPE.HOURS ? 360 / 12 : 360 / 60;
+    // const stepDeg = this.currentView === CLOCK_TYPE.HOURS ? 360 / 12 : 360 / 12;
+    const degrees = this.currentView === CLOCK_TYPE.HOURS && step > 12 ? (stepDeg * (index + 1 - 12)) : (stepDeg * (index + 1));
+    let classes = 'w-clock-step w-clock-deg' + degrees;
+    if (this.currentView === CLOCK_TYPE.MINUTES) classes += ' smaller';
+    if (this.currentView === CLOCK_TYPE.HOURS && this.userTime.format === 24 && step <= 12) classes += ' inside';
 
-            classes += ' mat-primary';
-        }
+    if (this.selectedTimePart === step) {
 
-        return classes;
+      classes += ' mat-primary';
     }
+    return classes;
+  }
 
-    private changeTimeValue(step: number) {
+  public changeTimeValue(step: number) {
 
-        if (this.currentView === CLOCK_TYPE.HOURS) {
-            this.userTime.hour = step;
+    if (this.currentView === CLOCK_TYPE.HOURS) {
+      this.userTime.hour = step;
 
-            // auto switch to minutes
-            this.viewChange.emit(CLOCK_TYPE.MINUTES);
-        } else {
-            this.userTime.minute = step;
+      // auto switch to minutes
+      this.viewChange.emit(CLOCK_TYPE.MINUTES);
+    } else {
+      this.userTime.minute = step;
 
-            // auto switch to hours
-            this.viewChange.emit(CLOCK_TYPE.HOURS);
-        }
-        this.userTimeChange.emit(this.userTime)
+      // auto switch to hours
+      // this.viewChange.emit(CLOCK_TYPE.HOURS);
     }
+    this.userTimeChange.emit(this.userTime);
+  }
+
+  public displayStep(step: number) {
+    if (this.currentView === CLOCK_TYPE.HOURS && step === 24) return '00';
+    if (this.currentView === CLOCK_TYPE.MINUTES && step % 5 !== 0) return '';
+    return step.toString();
+  }
 }
diff --git a/src/time-control/w-mat-timepicker/w-mat-timepicker.component.html b/src/time-control/w-mat-timepicker/w-mat-timepicker.component.html
index a12f74d..7feb964 100644
--- a/src/time-control/w-mat-timepicker/w-mat-timepicker.component.html
+++ b/src/time-control/w-mat-timepicker/w-mat-timepicker.component.html
@@ -1,18 +1,17 @@
-
 <div fxFlex fxLayout="row" class="w-mat-timepicker">
 
-    <button mat-button (click)="showPicker($event)" class="time-picker-button">
-        <mat-icon>access_time</mat-icon>
-    </button>
-    
     <mat-input-container fxFlex class="timeContainer">
         <input matInput
-            class="timeInput"
-            placeholder="Selec time" 
-            id="time_Control" 
-            name="time_Control"
-            [value]="time"
-        >
+               class="timeInput"
+               id="time_Control"
+               name="time_Control"
+               [value]="time"
+               [disabled]="disabled"
+               (change)="inputChange($event)">
+
+        <button mat-icon-button matSuffix [disabled]="disabled" (click)="showPicker($event)" class="time-picker-button">
+            <mat-icon>access_time</mat-icon>
+        </button>
     </mat-input-container>
 
 </div>
diff --git a/src/time-control/w-mat-timepicker/w-mat-timepicker.component.scss b/src/time-control/w-mat-timepicker/w-mat-timepicker.component.scss
index 217ecdb..3038781 100644
--- a/src/time-control/w-mat-timepicker/w-mat-timepicker.component.scss
+++ b/src/time-control/w-mat-timepicker/w-mat-timepicker.component.scss
@@ -1,6 +1,7 @@
 
 .time-picker-button {
-    padding: 0;
-    margin: 0;
-    min-width: 44px;
 }
+
+mat-input-container {
+    width: 120px;
+}
\ No newline at end of file
diff --git a/src/time-control/w-mat-timepicker/w-mat-timepicker.component.ts b/src/time-control/w-mat-timepicker/w-mat-timepicker.component.ts
index 8476e1d..b4deda6 100644
--- a/src/time-control/w-mat-timepicker/w-mat-timepicker.component.ts
+++ b/src/time-control/w-mat-timepicker/w-mat-timepicker.component.ts
@@ -1,102 +1,136 @@
+import {Component, Input, Output, EventEmitter, OnInit} from '@angular/core';
+import {MatDialog} from '@angular/material';
 
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material';
-
-import { WTimeDialogComponent } from '../w-time-dialog/w-time-dialog.component';
-import { ITime } from '../w-clock/w-clock.component';
-
+import {WTimeDialogComponent} from '../w-time-dialog/w-time-dialog.component';
+import {ITime} from '../w-clock/w-clock.component';
 
 
 @Component({
-    selector: 'w-mat-timepicker',
-    styleUrls: ['./w-mat-timepicker.component.scss'],
-    templateUrl: './w-mat-timepicker.component.html'
+  selector: 'w-mat-timepicker',
+  styleUrls: ['./w-mat-timepicker.component.scss'],
+  templateUrl: './w-mat-timepicker.component.html'
 })
 
 export class WMatTimePickerComponent implements OnInit {
 
-    @Input() userTime: ITime;
-    @Output() userTimeChange: EventEmitter<ITime> = new EventEmitter();
+  @Input() disabled = false;
+  @Input() userTime: ITime;
+  @Input() minTime: ITime;
+  @Input() maxTime: ITime;
+  @Output() userTimeChange: EventEmitter<ITime> = new EventEmitter();
 
-    @Input() color: string;
+  @Input() color: string;
 
-    constructor(private dialog: MatDialog) { }
+  constructor(private dialog: MatDialog) {
+  }
 
-    ngOnInit() {
+  ngOnInit() {
 
-        if (!this.userTime) {
+    if (!this.userTime) {
 
-            this.userTime = {
+      this.userTime = {
 
-                hour: 10,
-                minute: 25,
-                meriden: 'PM',
-                format: 24
-            }
-        }
+        hour: 10,
+        minute: 25,
+        meriden: 'PM',
+        format: 24
+      };
     }
+  }
 
-    private get time(): string {
-
-        if (!this.userTime) {
-            return '';
-        }
-
-        let meriden = `${this.userTime.meriden}`;
-        if (this.userTime.format === 24) {
-            meriden = '';
-        }
-
-        let hour = `${this.userTime.hour}`;
-        if (this.userTime.hour === 24) {
-            hour = '00';
-        }
+  get time(): string {
 
-        if (this.userTime.minute === 0) {
-            return `${hour}:00 ${meriden}`;
-
-        } else if (this.userTime.minute < 10) {
-
-            const tt = '0' + String(this.userTime.minute);
-            return `${hour}:${tt} ${meriden}`;
-
-        } else {
-            return `${hour}:${this.userTime.minute} ${meriden}`;
-        }
+    if (!this.userTime || this.disabled) {
+      return '';
     }
 
+    const meriden = `${this.userTime.meriden}`;
 
-    public showPicker($event) {
-
-        const dialogRef = this.dialog.open(WTimeDialogComponent, {
-
-            data: {
-                time: {
-                    hour: this.userTime.hour,
-                    minute: this.userTime.minute,
-                    meriden: this.userTime.meriden,
-                    format: this.userTime.format
-                },
-                color: this.color
-            }
-        });
+    let hour = `${this.userTime.hour}`;
+    if (this.userTime.hour === 24) {
+      hour = '00';
+    }
 
-        dialogRef.afterClosed()
-            .subscribe((result: ITime | -1) => {
-
-                // result will be update userTime object or -1 or undefined (closed dialog w/o clicking cancel)
-                if (result === undefined) {
-                    return;
-                } else if (result !== -1) {
-                    this.userTime = result;
-                    this.emituserTimeChange();
-                }
-            });
-        return false;
+    const tt = this.userTime.minute < 10 ? `${hour}:0` + String(this.userTime.minute) : `${hour}:${this.userTime.minute}`;
+    return this.userTime.format === 24 ? tt : tt + ` ${meriden}`;
+  }
+
+  inputChange(ev) {
+    const val = ev.target.value;
+    console.log('input change : ', val);
+    let [hourStr, minuteStr] = val.split(':');
+    let hour = hourStr ? parseInt(hourStr, 10) : 0;
+    if (this.userTime.format === 12) {
+      const meridenPos = minuteStr.indexOf(' ');
+      if (meridenPos > -1) {
+        minuteStr = minuteStr.substr(0, meridenPos);
+        const meriden = minuteStr.substr(meridenPos).toUpperCase();
+        this.userTime.meriden = ['PM', 'AM'].indexOf(meriden) > -1 ? meriden : this.userTime.meriden;
+      }
+    }
+    let minute = minuteStr ? parseInt(minuteStr, 10) : 0;
+    console.log('minute, hour : ', minute, hour);
+    const minHour = this.minTime ? this.minTime.hour : 0;
+    const maxHour = this.maxTime ? this.maxTime.hour : this.userTime.format - 1;
+    console.log('minHour, maxHour : ', minHour, maxHour);
+    if (hour < minHour) {
+      hour = minHour;
+      minute = 0;
+    }
+    if (hour > maxHour) {
+      hour = maxHour;
+      minute = 59;
     }
+    const minMinute = this.minTime && hour === minHour ? this.minTime.minute : 0;
+    const maxMinute = this.maxTime && hour === maxHour ? this.maxTime.minute : 59;
+    console.log('minMinute, maxMinute: ', minMinute, maxMinute);
+    if (minute < minMinute) {
+      minute = minMinute;
+    }
+    if (minute > maxMinute) {
+      minute = maxMinute;
+    }
+    console.log('minute, hour : ', minute, hour);
+    this.userTime.hour = hour;
+    this.userTime.minute = minute;
+    ev.target.value = this.time;
+    this.emituserTimeChange();
+  }
+
+  public showPicker($event) {
+
+    const dialogRef = this.dialog.open(WTimeDialogComponent, {
+
+      data: {
+        time: {
+          hour: this.userTime.hour,
+          minute: this.userTime.minute,
+          meriden: this.userTime.meriden,
+          format: this.userTime.format
+        },
+        minTime: this.minTime,
+        maxTime: this.maxTime,
+        color: this.color
+      },
+      width: '600px',
+    });
+
+    dialogRef.afterClosed()
+        .subscribe((result: ITime | -1) => {
+
+          // result will be update userTime object or -1 or undefined (closed dialog w/o clicking cancel)
+          if (result === undefined || (typeof result === 'number' && result === -1)) {
+            return;
+          } else {
+            this.userTime = result as ITime;
+            this.emituserTimeChange();
+          }
+        });
+    return false;
+  }
 
-    private emituserTimeChange() {
+  private emituserTimeChange() {
 
-        this.userTimeChange.emit(this.userTime);
-    }
+    this.userTimeChange.emit(this.userTime);
+  }
 }
diff --git a/src/time-control/w-time-dialog/w-time-dialog.component.html b/src/time-control/w-time-dialog/w-time-dialog.component.html
index 73db8e0..a0add8d 100644
--- a/src/time-control/w-time-dialog/w-time-dialog.component.html
+++ b/src/time-control/w-time-dialog/w-time-dialog.component.html
@@ -1,5 +1,5 @@
 
 <div mat-dialog-content class="w-timepicker-dialog">
-    <w-time [color]="color" [userTime]="userTime" (onRevert)="revert()" (onSubmit)="submit()"></w-time>
+    <w-time [color]="color" [userTime]="userTime" (onRevert)="revert()" (onSubmit)="submit()" [minTime]="minTime" [maxTime]="maxTime"></w-time>
 </div>
 
diff --git a/src/time-control/w-time-dialog/w-time-dialog.component.ts b/src/time-control/w-time-dialog/w-time-dialog.component.ts
index 8e4564c..654d9e4 100644
--- a/src/time-control/w-time-dialog/w-time-dialog.component.ts
+++ b/src/time-control/w-time-dialog/w-time-dialog.component.ts
@@ -14,27 +14,28 @@ import { CLOCK_TYPE, ITime } from '../w-clock/w-clock.component';
 export class WTimeDialogComponent {
 
     public userTime: ITime;
+    public maxTime: ITime;
+    public minTime: ITime;
     private VIEW_HOURS = CLOCK_TYPE.HOURS;
     private VIEW_MINUTES = CLOCK_TYPE.MINUTES;
     private currentView: CLOCK_TYPE = this.VIEW_HOURS;
 
     constructor(
-        @Inject(MAT_DIALOG_DATA) private data: { time: ITime, color: string },
+        @Inject(MAT_DIALOG_DATA) private data: { time: ITime, color: string, minTime?: ITime, maxTime?: ITime },
         @Inject(MAT_DIALOG_DATA) public color: string,
-        private dialogRef: MatDialogRef<WTimeDialogComponent>) {
-
+        private dialogRef: MatDialogRef<WTimeDialogComponent>,
+    ) {
         this.userTime = data.time;
         this.color = data.color;
-        console.log('this.color', this.color);
+        this.maxTime = data.maxTime;
+        this.minTime = data.minTime;
     }
 
     public revert() {
-
         this.dialogRef.close(-1);
     }
 
     public submit() {
-
         this.dialogRef.close(this.userTime);
     }
 }
diff --git a/src/time-control/w-time/w-time.component.html b/src/time-control/w-time/w-time.component.html
index cd928ed..abe1a12 100644
--- a/src/time-control/w-time/w-time.component.html
+++ b/src/time-control/w-time/w-time.component.html
@@ -13,7 +13,7 @@
   </mat-toolbar>
 
   <div fxLayout="column" fxLayoutAlign="space-between center" class="w-time-content">
-      <w-clock [color]="color" class="w-animation-zoom" [userTime]="userTime" (userTimeChange)="emituserTimeChange($event)" [(currentView)]="currentView" (viewChange)="setCurrentView($event)"></w-clock>
+      <w-clock [color]="color" class="w-animation-zoom" [userTime]="userTime" [minTime]="minTime" [maxTime]="maxTime" (userTimeChange)="emituserTimeChange($event)" [(currentView)]="currentView" (viewChange)="setCurrentView($event)"></w-clock>
 
       <div fxFlexAlign="end">
           <button mat-button (click)="revert()">{{revertLabel}}</button>
diff --git a/src/time-control/w-time/w-time.component.ts b/src/time-control/w-time/w-time.component.ts
index ad5cdc4..e213a2e 100644
--- a/src/time-control/w-time/w-time.component.ts
+++ b/src/time-control/w-time/w-time.component.ts
@@ -13,6 +13,8 @@ import { CLOCK_TYPE, ITime } from '../w-clock/w-clock.component';
 export class WTimeComponent implements OnInit {
 
   @Input() userTime: ITime;
+  @Input() minTime: ITime;
+  @Input() maxTime: ITime;
   @Output() userTimeChange: EventEmitter<ITime> = new EventEmitter();
 
   @Input() revertLabel: string;
@@ -43,13 +45,11 @@ export class WTimeComponent implements OnInit {
     }
 
     if (!this.revertLabel) {
-
-      this.revertLabel = 'Cancel'
+      this.revertLabel = 'Annuler';
     }
 
     if (!this.submitLabel) {
-
-      this.submitLabel = 'Okay'
+      this.submitLabel = 'OK';
     }
   }
 
@@ -77,8 +77,16 @@ export class WTimeComponent implements OnInit {
   }
 
   public setCurrentView(type: CLOCK_TYPE) {
-
     this.currentView = type;
+    if (this.currentView === CLOCK_TYPE.HOURS || (!this.minTime && !this.maxTime)) return;
+    if (this.minTime && this.minTime.hour === this.userTime.hour && this.userTime.minute < this.minTime.minute) {
+      this.userTime.minute = this.minTime.minute;
+      return;
+    }
+    if (this.maxTime && this.maxTime.hour === this.userTime.hour && this.userTime.minute > this.maxTime.minute) {
+      this.userTime.minute = this.maxTime.minute;
+      return;
+    }
   }
 
   public setMeridien(m: 'PM' | 'AM') {