module created, added min & max abilities, 24hours time format now di…

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 { }

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>
 

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%;
-}
+}
+.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%;}