Issues (#103, #108, #109, #112) (#113)

* issue109: ! fix bug with dead zone in 12 or 00 time section

* issue108: + add hourSelected event emitter

* + add test case

* issue112: + add opened event emitter

* + add linter to travis CI

* issue103: * show/hide dial hint onFocus/onBlur dial control

* * update changelog and version

.travis.yml

@@ -4,6 +4,7 @@ node_js:
 - '10'
 
 script:
+- npm run lint
 - npm run test
 - npm run build
 

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file
 
+## 2.13.0 (2019-02-16)
+
+### Features
+
+* feat(ngx-material-timepicker): add `hourSelected` event emitter [(dd43874)](https://github.com/Agranom/ngx-material-timepicker/commit/dd4387407284788438a79283139a9a4f6e4fff44),
+closes [(#108)](https://github.com/Agranom/ngx-material-timepicker/issues/108)
+
+* feat(ngx-material-timepicker): add `opened` event emitter [(5bc9cc0)](https://github.com/Agranom/ngx-material-timepicker/commit/5bc9cc088482ba1aeee32af2c97a0ece86dc1205),
+closes [(#112)](https://github.com/Agranom/ngx-material-timepicker/issues/112)
+
+* feat(ngx-material-timepicker-dial): add possibility to set a custom hint template [(479f311)](https://github.com/Agranom/ngx-material-timepicker/commit/479f311cee74db79372263a19911cf5b0e73b8b8),
+relates to [(#103)](https://github.com/Agranom/ngx-material-timepicker/issues/103)
+
+### Fixes
+
+* fix(clock face): fix bug with dead zone in 12 or 00 time section [(07a8618)](https://github.com/Agranom/ngx-material-timepicker/commit/07a861897842a8e7225a2a9d4613083481587df1),
+ closes [(#109)](https://github.com/Agranom/ngx-material-timepicker/issues/109)
+
+### Improvements
+
+* improvement(ngx-material-timepicker-dial): show/hide dial hint onFocus/onBlur dial control [(c96da39)](https://github.com/Agranom/ngx-material-timepicker/commit/c96da391ef37931947d0db8b65b9a987bb59b4eb),
+ relates to [(#103)](https://github.com/Agranom/ngx-material-timepicker/issues/103)
+
 ## 2.12.0 (2019-01-26)
 
 ### Features

README.md

@@ -79,6 +79,8 @@ Selector: `ngx-material-timepicker`
   cancelBtnTmpl: TemplateRef<Node> |  Set if you want to change cancel button to your custom one. | 
 | @Input()
   confirmBtnTmpl: TemplateRef<Node> | Set if you want to change confirm button to your custom one. |
+| @Input()
+  editableHintTmpl: TemplateRef<Node> | Set if you want to change dial hint to your custom one. Works only if `enableKeyboardInput = true` |
 | @Input()
   ESC: boolean | Disable or enable closing timepicker by ESC. |
 | @Input()
@@ -91,8 +93,12 @@ Selector: `ngx-material-timepicker`
   preventOverlayClick: boolean | Set `true` to prevent closing the timepicker by overlay click. Uses `false` by default |
 | @Output()
   timeSet: EventEmitter\<string\> | Emits time when that was set. |
+| @Output()
+  opened: EventEmitter\<null\> | Emits after timepicker was opened. |
 | @Output()
   closed: EventEmitter\<null\> | Emits after timepicker was closed. |
+| @Output()
+  hourSelected: EventEmitter\<number\> | Emits after hour was selected. |
 
 **NgxMaterialTimepickerToggleComponent**
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ngx-material-timepicker",
     "description": "Handy material design timepicker for angular",
-    "version": "2.12.0",
+    "version": "2.13.0",
     "license": "MIT",
     "author": "Vitalii Boiko <boyko330@gmail.com>",
     "keywords": [

src/app/app.component.html

@@ -2,8 +2,10 @@
     <div class="container header__container">
         <h1>Material Time Picker</h1>
         <a class="github-link" href="https://github.com/Agranom/ngx-material-timepicker.git">
+            <!--suppress HtmlUnknownAttribute -->
             <svg aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-github-icon">GitHub icon</title>
+                <!--suppress CheckEmptyScriptTag -->
                 <path fill="#ffffff"
                       d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
             </svg>
@@ -28,8 +30,8 @@ <h3 class="ngx-material-timepicker-examples__title">Examples</h3>
                     </p>
                     <div class="ngx-material-timepicker-example__form-group">
                         <input placeholder="12hr format (default settings)" aria-label="12hr format"
-                               [ngxTimepicker]="default" readonly>
-                        <ngx-material-timepicker #default [preventOverlayClick]="true"></ngx-material-timepicker>
+                               [ngxTimepicker]="defaultPicker" readonly>
+                        <ngx-material-timepicker #defaultPicker [preventOverlayClick]="true"></ngx-material-timepicker>
                     </div>
                     <div class="ngx-material-timepicker-example__form-group">
                         <input placeholder="24hr format" aria-label="24hr format"
@@ -89,6 +91,7 @@ <h3 class="ngx-material-timepicker-examples__title">Examples</h3>
                     </p>
                     <div
                         class="ngx-material-timepicker-example__form-group ngx-material-timepicker-example__form-group--toggled">
+                        <!--suppress HtmlFormInputWithoutLabel -->
                         <input [ngxTimepicker]="toggleTimepicker" [disableClick]="true" readonly>
                         <ngx-material-timepicker-toggle [for]="toggleTimepicker"></ngx-material-timepicker-toggle>
                         <ngx-material-timepicker #toggleTimepicker></ngx-material-timepicker>
@@ -101,8 +104,10 @@ <h3 class="ngx-material-timepicker-examples__title">Examples</h3>
                         <input placeholder="Toggle button"
                                [ngxTimepicker]="toggleIcon" [disableClick]="true" readonly>
                         <ngx-material-timepicker-toggle [for]="toggleIcon">
+                            <!--suppress HtmlUnknownAttribute -->
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"
                                  ngxMaterialTimepickerToggleIcon>
+                                <!--suppress CheckEmptyScriptTag -->
                                 <path
                                     d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,16H7.995 C7.445,16,7,15.555,7,15.005v-0.011C7,14.445,7.445,14,7.995,14H14V5.995C14,5.445,14.445,5,14.995,5h0.011 C15.555,5,16,5.445,16,5.995V16z"/>
                             </svg>
@@ -176,15 +181,25 @@ <h3 class="ngx-material-timepicker-examples__title">Examples</h3>
                     <div class="ngx-material-timepicker-example__form-group">
                         <input placeholder="Custom theme" aria-label="Custom theme"
                                [ngxTimepicker]="darkPicker" readonly>
-                        <ngx-material-timepicker #darkPicker [ngxMaterialTimepickerTheme]="darkTheme"></ngx-material-timepicker>
+                        <ngx-material-timepicker #darkPicker
+                                                 [ngxMaterialTimepickerTheme]="darkTheme"></ngx-material-timepicker>
+                    </div>
+                    <div class="ngx-material-timepicker-example__form-group">
+                        <input placeholder="Custom hint" aria-label="Custom hint"
+                               [ngxTimepicker]="customHint" readonly>
+                        <ngx-material-timepicker #customHint [enableKeyboardInput]="true"
+                                                 [editableHintTmpl]="dialHint"></ngx-material-timepicker>
+                        <ng-template #dialHint>
+                            <p>Custom hint</p>
+                        </ng-template>
                     </div>
                 </div>
             </section>
         </div>
     </main>
     <footer class="footer">
         <div class="container">
-            <p class="footer__version">Current version 2.12.0</p>
+            <p class="footer__version">Current version 2.13.0</p>
         </div>
     </footer>
 </div>

src/app/app.component.ts

@@ -1,5 +1,5 @@
 /* tslint:disable:max-line-length */
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 import { NgxMaterialTimepickerTheme } from './material-timepicker/models/ngx-material-timepicker-theme.interface';
 
 @Component({
@@ -136,6 +136,16 @@ export class AppComponent {
                 clockFaceTimeInactiveColor: '#fff'
             }
         };
+
+        <div class="custom-hint-example">
+            <input placeholder="Custom hint" aria-label="Custom hint"
+                [ngxTimepicker]="customHint" readonly>
+            <ngx-material-timepicker #customHint [enableKeyboardInput]="true"
+                [editableHintTmpl]="dialHint"></ngx-material-timepicker>
+            <ng-template #dialHint>
+                <p>Custom hint</p>
+            </ng-template>
+        </div>
     `;
 
     darkTheme: NgxMaterialTimepickerTheme = {

src/app/material-timepicker/components/timepicker-12-hours-face/ngx-material-timepicker-12-hours-face.component.html

@@ -1,2 +1,2 @@
 <ngx-material-timepicker-face [selectedTime]="selectedHour" [faceTime]="hoursList"
-                              (timeChange)="hourChange.next($event)" (timeSelected)="hourSelected.next()"></ngx-material-timepicker-face>
+                              (timeChange)="hourChange.next($event)" (timeSelected)="onTimeSelected($event)"></ngx-material-timepicker-face>

src/app/material-timepicker/components/timepicker-24-hours-face/ngx-material-timepicker-24-hours-face.component.html

@@ -1,3 +1,3 @@
 <ngx-material-timepicker-face [selectedTime]="selectedHour" [faceTime]="hoursList" [format]="format"
                               (timeChange)="hourChange.next($event)"
-                              (timeSelected)="hourSelected.next()"></ngx-material-timepicker-face>
+                              (timeSelected)="onTimeSelected($event)"></ngx-material-timepicker-face>

src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts

@@ -1,4 +1,4 @@
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { NgxMaterialTimepickerDialControlComponent } from './ngx-material-timepicker-dial-control.component';
 import { NO_ERRORS_SCHEMA, SimpleChanges } from '@angular/core';
 import { TimeUnit } from '../../models/time-unit.enum';
@@ -17,17 +17,17 @@ describe('NgxMaterialTimepickerDialControlComponent', () => {
         component = fixture.componentInstance;
     });
 
-    it('should set current time to previous time and change time unit', fakeAsync(() => {
-        let timeUnit = null;
-        component.timeUnitChanged.subscribe(unit => timeUnit = unit);
+    it('should set current time to previous time, change time unit and emit focus event', async (() => {
+        let counter = 0;
+        component.timeUnitChanged.subscribe(unit => expect(unit).toBe(TimeUnit.MINUTE));
+        component.focused.subscribe(() => expect(++counter).toBe(1));
 
         component.time = '10';
         expect(component.previousTime).toBeUndefined();
 
         component.saveTimeAndChangeTimeUnit({preventDefault: () => null} as FocusEvent, TimeUnit.MINUTE);
 
         expect(component.previousTime).toBe('10');
-        expect(timeUnit).toBe(TimeUnit.MINUTE);
     }));
 
     it('should emit changed time if it exists and available', fakeAsync(() => {
@@ -102,7 +102,9 @@ describe('NgxMaterialTimepickerDialControlComponent', () => {
         expect(component.time).toBe('4');
     });
 
-    it('should format time if editable', () => {
+    it('should format time if editable and emit unfocused event', async(() => {
+        let counter = 0;
+
         component.isEditable = true;
         component.time = '2';
         component.previousTime = 4;
@@ -111,15 +113,16 @@ describe('NgxMaterialTimepickerDialControlComponent', () => {
         component.formatTime();
         expect(component.time).toBe('02');
 
+        component.unfocused.subscribe(() => expect(++counter).toBe(1));
         component.time = '';
         component.formatTime();
-        expect(component.time).toBe('04');
 
+        expect(component.time).toBe('04');
         component.time = '5';
         component.isEditable = false;
         component.formatTime();
         expect(component.time).toBe('5');
-    });
+    }));
 
     describe('onKeyDown', () => {
         let counter = 0;

src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts

@@ -22,6 +22,8 @@ export class NgxMaterialTimepickerDialControlComponent implements OnChanges {
 
     @Output() timeUnitChanged = new EventEmitter<TimeUnit>();
     @Output() timeChanged = new EventEmitter<ClockFaceTime>();
+    @Output() focused = new EventEmitter<null>();
+    @Output() unfocused = new EventEmitter<null>();
 
     private get selectedTime(): ClockFaceTime {
         if (!!this.time) {
@@ -42,6 +44,7 @@ export class NgxMaterialTimepickerDialControlComponent implements OnChanges {
         event.preventDefault();
         this.previousTime = this.time;
         this.timeUnitChanged.next(unit);
+        this.focused.next();
     }
 
     updateTime(): void {
@@ -56,6 +59,7 @@ export class NgxMaterialTimepickerDialControlComponent implements OnChanges {
         if (this.isEditable) {
             const time = this.time || this.previousTime;
             this.time = new TimeFormatterPipe().transform(+time, this.timeUnit);
+            this.unfocused.next();
         }
     }