Bugfixes (#63)

* bugfix/issue62: fix format appearance

* bugfix/issue61: fix touch events

* feat(autofocus): add autofocus for timepicker dial control

* update version

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file
 
+## 2.8.3 (2018-11-02)
+
+### Fixes
+
+* fix(timepicker output): fix format appearance, closes [(#62)](https://github.com/Agranom/ngx-material-timepicker/issues/62)
+* fix(timepicker clock face): fix touch events, closes [(#61)](https://github.com/Agranom/ngx-material-timepicker/issues/61)
+* fix(timepicker dial): change focus on dial (hour <=> minute)
+
 ## 2.8.2 (2018-10-29)
 
 ### Fixes

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ngx-material-timepicker",
     "description": "Handy material design timepicker for angular",
-    "version": "2.8.2",
+    "version": "2.8.3",
     "license": "MIT",
     "author": "Vitalii Boiko <[email protected]>",
     "keywords": [

src/app/app.component.html

@@ -175,7 +175,7 @@ <h3 class="ngx-material-timepicker-examples__title">Examples</h3>
     </main>
     <footer class="footer">
         <div class="container">
-            <p class="footer__version">Current version 2.8.2</p>
+            <p class="footer__version">Current version 2.8.3</p>
         </div>
     </footer>
 </div>

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

@@ -2,4 +2,4 @@
 <input class="timepicker-dial__control timepicker-dial__item"
        [ngClass]="{'timepicker-dial__item_active': isActive, 'timepicker-dial__control_editable': isEditable}"
        [(ngModel)]="time" (input)="updateTime()" (focus)="saveTimeAndChangeTimeUnit(timeUnit)"
-       (blur)="revertTimeAndFormat()" [readonly]="!isEditable">
+       (blur)="revertTimeAndFormat()" [readonly]="!isEditable" [timepickerAutofocus]="isActive">

src/app/material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts

@@ -6,6 +6,7 @@ import {
     HostListener,
     Input,
     OnChanges,
+    OnDestroy,
     Output,
     SimpleChanges,
     ViewChild
@@ -29,7 +30,7 @@ const CLOCK_HAND_STYLES = {
     templateUrl: './ngx-material-timepicker-face.component.html',
     styleUrls: ['./ngx-material-timepicker-face.component.scss']
 })
-export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChanges {
+export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChanges, OnDestroy {
 
     timeUnit = TimeUnit;
 
@@ -49,9 +50,12 @@ export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChan
     @ViewChild('clockHand') clockHand: ElementRef;
 
     private isStarted: boolean;
+    private touchStartHandler: () => any;
+    private touchEndHandler: () => any;
 
     ngAfterViewInit() {
         this.setClockHandPosition();
+        this.addTouchEvents();
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -77,7 +81,6 @@ export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChan
         return time.time;
     }
 
-    @HostListener('touchstart', ['$event'])
     @HostListener('mousedown', ['$event'])
     onMousedown(e: MouseEvent | TouchEvent) {
         e.preventDefault();
@@ -123,7 +126,6 @@ export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChan
 
     }
 
-    @HostListener('touchend', ['$event'])
     @HostListener('mouseup', ['$event'])
     onMouseup(e: MouseEvent | TouchEvent) {
         e.preventDefault();
@@ -138,6 +140,23 @@ export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChan
         return ((this.selectedTime.time === minute) && (minute % (this.minutesGap || 5) === 0)) && !this.isClockFaceDisabled;
     }
 
+    ngOnDestroy() {
+        this.removeTouchEvents();
+    }
+
+    private addTouchEvents(): void {
+        this.touchStartHandler = this.onMousedown.bind(this);
+        this.touchEndHandler = this.onMouseup.bind(this);
+
+        this.clockFace.nativeElement.addEventListener('touchstart', this.touchStartHandler);
+        this.clockFace.nativeElement.addEventListener('touchend', this.touchEndHandler);
+    }
+
+    private removeTouchEvents(): void {
+        this.clockFace.nativeElement.removeEventListener('touchstart', this.touchStartHandler);
+        this.clockFace.nativeElement.removeEventListener('touchend', this.touchEndHandler);
+    }
+
     private setClockHandPosition(): void {
         if (this.format === 24) {
             if (this.selectedTime.time > 12 || this.selectedTime.time === '00') {

src/app/material-timepicker/directives/autofocus.directive.ts

@@ -0,0 +1,26 @@
+import {Directive, ElementRef, Inject, Input, OnChanges, OnDestroy, Optional} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+
+@Directive({
+    selector: '[timepickerAutofocus]'
+})
+export class AutofocusDirective implements OnChanges, OnDestroy {
+
+    @Input('timepickerAutofocus') isFocusActive: boolean;
+
+    private activeElement: HTMLElement;
+
+    constructor(private element: ElementRef, @Optional() @Inject(DOCUMENT) private document: any) {
+        this.activeElement = this.document.activeElement;
+    }
+
+    ngOnChanges() {
+        if (this.isFocusActive) {
+            this.element.nativeElement.focus();
+        }
+    }
+
+    ngOnDestroy() {
+        this.activeElement.focus();
+    }
+}

src/app/material-timepicker/directives/ngx-timepicker.directive.ts

@@ -30,43 +30,18 @@ const VALUE_ACCESSOR = {
     },
 })
 export class TimepickerDirective implements ControlValueAccessor, OnDestroy, OnChanges {
-    @Input()
-    set value(value: string) {
-        if (!value) {
-            this._value = '';
-            this.updateInputValue();
-            return;
-        }
-        const time = TimeAdapter.formatTime(value, this._format);
-        if (TimeAdapter.isTimeAvailable(time, <Moment>this._min, <Moment>this._max, 'minutes')) {
-            this._value = time;
-            this.updateInputValue();
-            return;
-        }
-        console.warn('Selected time doesn\'t match min or max value');
-    }
 
-    get value(): string {
-        return this._value;
+    @Input()
+    set format(value: number) {
+        this._format = value === 24 ? 24 : 12;
     }
 
-    private _value = '';
-
     get format(): number {
         return this._format;
     }
 
-    @Input()
-    set format(value: number) {
-        this._format = value === 24 ? 24 : 12;
-    }
-
     private _format = 12;
 
-    get min(): string | Moment {
-        return this._min;
-    }
-
     @Input()
     set min(value: string | Moment) {
         if (typeof value === 'string') {
@@ -76,12 +51,12 @@ export class TimepickerDirective implements ControlValueAccessor, OnDestroy, OnC
         this._min = value;
     }
 
-    private _min: string | Moment;
-
-    get max(): string | Moment {
-        return this._max;
+    get min(): string | Moment {
+        return this._min;
     }
 
+    private _min: string | Moment;
+
     @Input()
     set max(value: string | Moment) {
         if (typeof value === 'string') {
@@ -91,9 +66,33 @@ export class TimepickerDirective implements ControlValueAccessor, OnDestroy, OnC
         this._max = value;
     }
 
+    get max(): string | Moment {
+        return this._max;
+    }
+
     private _max: string | Moment;
 
+    @Input()
+    set value(value: string) {
+        if (!value) {
+            this._value = '';
+            this.updateInputValue();
+            return;
+        }
+        const time = TimeAdapter.formatTime(value, this._format);
+        if (TimeAdapter.isTimeAvailable(time, <Moment>this._min, <Moment>this._max, 'minutes')) {
+            this._value = time;
+            this.updateInputValue();
+            return;
+        }
+        console.warn('Selected time doesn\'t match min or max value');
+    }
 
+    get value(): string {
+        return this._value;
+    }
+
+    private _value = '';
 
     @Input('ngxTimepicker')
     set timepicker(picker: NgxMaterialTimepickerComponent) {

src/app/material-timepicker/ngx-material-timepicker.component.html

@@ -1,7 +1,6 @@
 <div class="timepicker-backdrop-overlay" *ngIf="isOpened" overlay></div>
 <div class="timepicker-overlay" *ngIf="isOpened">
-    <div class="timepicker" [@timepicker]="animationState" (@timepicker.done)="animationDone($event)" tabindex="0"
-         focusAnchor>
+    <div class="timepicker" [@timepicker]="animationState" (@timepicker.done)="animationDone($event)" tabindex="0">
         <header class="timepicker__header">
             <ngx-material-timepicker-dial [format]="format" [hour]="selectedHour?.time | timeFormatter: timeUnit.HOUR"
                                           [minute]="selectedMinute?.time | timeFormatter: timeUnit.MINUTE"

src/app/material-timepicker/ngx-material-timepicker.module.ts

@@ -2,36 +2,24 @@ import {ModuleWithProviders, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {NgxMaterialTimepickerComponent} from './ngx-material-timepicker.component';
 import {StyleSanitizerPipe} from './pipes/style-sanitizer.pipe';
-import {
-    NgxMaterialTimepickerMinutesFaceComponent
-} from './components/timepicker-minutes-face/ngx-material-timepicker-minutes-face.component';
+import {NgxMaterialTimepickerMinutesFaceComponent} from './components/timepicker-minutes-face/ngx-material-timepicker-minutes-face.component';
 import {NgxMaterialTimepickerService} from './services/ngx-material-timepicker.service';
 import {NgxMaterialTimepickerFaceComponent} from './components/timepicker-face/ngx-material-timepicker-face.component';
 import {TimeFormatterPipe} from './pipes/time-formatter.pipe';
-import {
-    NgxMaterialTimepickerButtonComponent
-} from './components/timepicker-button/ngx-material-timepicker-button.component';
+import {NgxMaterialTimepickerButtonComponent} from './components/timepicker-button/ngx-material-timepicker-button.component';
 import {TimepickerDirective} from './directives/ngx-timepicker.directive';
 import {OverlayDirective} from './directives/overlay.directive';
 import {NgxMaterialTimepickerEventService} from './services/ngx-material-timepicker-event.service';
-import {FocusAnchorDirective} from './directives/focus-anchor.directive';
-import {
-    NgxMaterialTimepickerToggleComponent
-} from './components/timepicker-toggle-button/ngx-material-timepicker-toggle.component';
+import {NgxMaterialTimepickerToggleComponent} from './components/timepicker-toggle-button/ngx-material-timepicker-toggle.component';
 import {NgxMaterialTimepickerToggleIconDirective} from './directives/ngx-material-timepicker-toggle-icon.directive';
-import {
-    NgxMaterialTimepicker12HoursFaceComponent
-} from './components/timepicker-12-hours-face/ngx-material-timepicker-12-hours-face.component';
-import {
-    NgxMaterialTimepicker24HoursFaceComponent
-} from './components/timepicker-24-hours-face/ngx-material-timepicker-24-hours-face.component';
+import {NgxMaterialTimepicker12HoursFaceComponent} from './components/timepicker-12-hours-face/ngx-material-timepicker-12-hours-face.component';
+import {NgxMaterialTimepicker24HoursFaceComponent} from './components/timepicker-24-hours-face/ngx-material-timepicker-24-hours-face.component';
 import {FormsModule} from '@angular/forms';
 import {NgxMaterialTimepickerDialComponent} from './components/timepicker-dial/ngx-material-timepicker-dial.component';
-import {
-    NgxMaterialTimepickerDialControlComponent
-} from './components/timepicker-dial-control/ngx-material-timepicker-dial-control.component';
-import { MinutesFormatterPipe } from './pipes/minutes-formatter.pipe';
+import {NgxMaterialTimepickerDialControlComponent} from './components/timepicker-dial-control/ngx-material-timepicker-dial-control.component';
+import {MinutesFormatterPipe} from './pipes/minutes-formatter.pipe';
 import {NgxMaterialTimepickerPeriodComponent} from './components/timepicker-period/ngx-material-timepicker-period.component';
+import {AutofocusDirective} from './directives/autofocus.directive';
 
 @NgModule({
     imports: [
@@ -59,8 +47,8 @@ import {NgxMaterialTimepickerPeriodComponent} from './components/timepicker-peri
         TimeFormatterPipe,
         TimepickerDirective,
         OverlayDirective,
-        FocusAnchorDirective,
         NgxMaterialTimepickerToggleIconDirective,
+        AutofocusDirective,
         MinutesFormatterPipe
     ]
 })