Added innerClockFaceSize on input parameter for h24

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

ng-package.json

@@ -1,10 +1,3 @@
 {
-    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-    "lib": {
-        "entryFile": "public_api.ts"
-    },
-    "whitelistedNonPeerDependencies": [
-        "luxon",
-        "@types/luxon"
-    ]
+
 }

package.json

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

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

@@ -34,6 +34,7 @@
                                                                [minTime]="minTime"
                                                                [maxTime]="maxTime"
                                                                [format]="format"
+                                                               [innerClockFaceSize]="innerClockFaceSize"
                                                                (hourSelected)="onHourSelected($event)"></ngx-material-timepicker-24-hours-face>
                         <ng-template #ampmHours>
                             <ngx-material-timepicker-12-hours-face

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

@@ -20,25 +20,28 @@ export enum AnimationState {
 }
 
 @Component({
-    selector: 'ngx-material-timepicker-container',
-    templateUrl: './ngx-material-timepicker-container.component.html',
-    styleUrls: ['./ngx-material-timepicker-container.component.scss'],
+    selector: "ngx-material-timepicker-container",
+    templateUrl: "./ngx-material-timepicker-container.component.html",
+    styleUrls: ["./ngx-material-timepicker-container.component.scss"],
     animations: [
-        trigger('timepicker', [
+        trigger("timepicker", [
             transition(`* => ${AnimationState.ENTER}`, [
-                style({transform: 'translateY(-30%)'}),
-                animate('0.2s ease-out', style({transform: 'translateY(0)'}))
+                style({ transform: "translateY(-30%)" }),
+                animate("0.2s ease-out", style({ transform: "translateY(0)" })),
             ]),
             transition(`${AnimationState.ENTER} => ${AnimationState.LEAVE}`, [
-                style({transform: 'translateY(0)', opacity: 1}),
-                animate('0.2s ease-out', style({transform: 'translateY(-30%)', opacity: 0}))
-            ])
-        ])
+                style({ transform: "translateY(0)", opacity: 1 }),
+                animate(
+                    "0.2s ease-out",
+                    style({ transform: "translateY(-30%)", opacity: 0 })
+                ),
+            ]),
+        ]),
     ],
-    providers: [NgxMaterialTimepickerService]
+    providers: [NgxMaterialTimepickerService],
 })
-export class NgxMaterialTimepickerContainerComponent implements OnInit, OnDestroy, TimepickerConfig {
-
+export class NgxMaterialTimepickerContainerComponent
+    implements OnInit, OnDestroy, TimepickerConfig {
     selectedHour: Observable<ClockFaceTime>;
     selectedMinute: Observable<ClockFaceTime>;
     selectedPeriod: Observable<TimePeriod>;
@@ -66,6 +69,7 @@ export class NgxMaterialTimepickerContainerComponent implements OnInit, OnDestro
     minTime: DateTime;
     maxTime: DateTime;
     time: string;
+    innerClockFaceSize: number;
 
     timepickerClass: string;
     theme: NgxMaterialTimepickerTheme;
@@ -85,33 +89,37 @@ export class NgxMaterialTimepickerContainerComponent implements OnInit, OnDestro
 
     private unsubscribe = new Subject();
 
-    constructor(private timepickerService: NgxMaterialTimepickerService,
-                private eventService: NgxMaterialTimepickerEventService,
-                @Inject(TIME_LOCALE) private locale: string) {
-    }
+    constructor(
+        private timepickerService: NgxMaterialTimepickerService,
+        private eventService: NgxMaterialTimepickerEventService,
+        @Inject(TIME_LOCALE) private locale: string
+    ) {}
 
-    @HostListener('keydown', ['$event'])
+    @HostListener("keydown", ["$event"])
     onKeydown(e: any): void {
         this.eventService.dispatchEvent(e);
         e.stopPropagation();
     }
 
     ngOnInit(): void {
-
         this.animationState = !this.disableAnimation && AnimationState.ENTER;
 
         this.defineTime();
 
-        this.selectedHour = this.timepickerService.selectedHour
-            .pipe(shareReplay({bufferSize: 1, refCount: true}));
+        this.selectedHour = this.timepickerService.selectedHour.pipe(
+            shareReplay({ bufferSize: 1, refCount: true })
+        );
 
-        this.selectedMinute = this.timepickerService.selectedMinute
-            .pipe(shareReplay({bufferSize: 1, refCount: true}));
+        this.selectedMinute = this.timepickerService.selectedMinute.pipe(
+            shareReplay({ bufferSize: 1, refCount: true })
+        );
 
-        this.selectedPeriod = this.timepickerService.selectedPeriod
-            .pipe(shareReplay({bufferSize: 1, refCount: true}));
+        this.selectedPeriod = this.timepickerService.selectedPeriod.pipe(
+            shareReplay({ bufferSize: 1, refCount: true })
+        );
 
-        this.timepickerBaseRef.timeUpdated.pipe(takeUntil(this.unsubscribe))
+        this.timepickerBaseRef.timeUpdated
+            .pipe(takeUntil(this.unsubscribe))
             .subscribe(this.setDefaultTime.bind(this));
     }
 
@@ -142,7 +150,9 @@ export class NgxMaterialTimepickerContainerComponent implements OnInit, OnDestro
     }
 
     setTime(): void {
-        this.timepickerBaseRef.timeSet.next(this.timepickerService.getFullTime(this.format));
+        this.timepickerBaseRef.timeSet.next(
+            this.timepickerService.getFullTime(this.format)
+        );
         this.close();
     }
 
@@ -156,7 +166,10 @@ export class NgxMaterialTimepickerContainerComponent implements OnInit, OnDestro
     }
 
     animationDone(event: AnimationEvent): void {
-        if (event.phaseName === 'done' && event.toState === AnimationState.LEAVE) {
+        if (
+            event.phaseName === "done" &&
+            event.toState === AnimationState.LEAVE
+        ) {
             this.timepickerBaseRef.close();
         }
     }
@@ -168,26 +181,33 @@ export class NgxMaterialTimepickerContainerComponent implements OnInit, OnDestro
 
     private setDefaultTime(time: string): void {
         this.timepickerService.setDefaultTimeIfAvailable(
-            time, this.minTime, this.maxTime, this.format, this.minutesGap);
+            time,
+            this.minTime,
+            this.maxTime,
+            this.format,
+            this.minutesGap
+        );
     }
 
     private defineTime(): void {
         const minTime = this.minTime;
 
-        if (minTime && (!this.time && !this.defaultTime)) {
+        if (minTime && !this.time && !this.defaultTime) {
             const time = TimeAdapter.fromDateTimeToString(minTime, this.format);
 
             this.setDefaultTime(time);
         }
     }
 
     private onTimeChange(): void {
-        const time = TimeAdapter.toLocaleTimeString(this.timepickerService.getFullTime(this.format), {
-            locale: this.locale,
-            format: this.format
-        });
+        const time = TimeAdapter.toLocaleTimeString(
+            this.timepickerService.getFullTime(this.format),
+            {
+                locale: this.locale,
+                format: this.format,
+            }
+        );
 
         this.timepickerBaseRef.timeChanged.emit(time);
     }
-
 }

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"
+<ngx-material-timepicker-face [selectedTime]="selectedHour" [innerClockFaceSize]="innerClockFaceSize" [faceTime]="hoursList" [format]="format"
                               (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.ts

@@ -20,5 +20,6 @@ export class NgxMaterialTimepicker24HoursFaceComponent extends NgxMaterialTimepi
             max: this.maxTime,
             format: this.format
         });
+
     }
 }

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

@@ -4,15 +4,15 @@ import {ClockFaceTime} from '../../models/clock-face-time.interface';
 import {TimeUnit} from '../../models/time-unit.enum';
 import {isDigit} from '../../utils/timepicker.utils';
 import {TimeParserPipe} from '../../pipes/time-parser.pipe';
+import { NgxMaterialTimepickerDialService } from '../../services/ngx-material-timepicker-dial-service';
 
 @Component({
     selector: 'ngx-material-timepicker-dial-control',
     templateUrl: 'ngx-material-timepicker-dial-control.component.html',
     styleUrls: ['ngx-material-timepicker-dial-control.component.scss'],
-    providers: [TimeParserPipe]
+    providers: [TimeParserPipe],
 })
 export class NgxMaterialTimepickerDialControlComponent {
-
     previousTime: number | string;
 
     @Input() timeList: ClockFaceTime[];
@@ -28,16 +28,19 @@ export class NgxMaterialTimepickerDialControlComponent {
     @Output() focused = new EventEmitter<null>();
     @Output() unfocused = new EventEmitter<null>();
 
-    constructor(private timeParserPipe: TimeParserPipe) {
-    }
+    constructor(
+        private timeParserPipe: TimeParserPipe,
+        private ngxMaterialTimepickerDialService: NgxMaterialTimepickerDialService
+    ) {}
 
     private get selectedTime(): ClockFaceTime {
         if (!!this.time) {
-            return this.timeList.find(t => t.time === +this.time);
+            return this.timeList.find((t) => t.time === +this.time);
         }
     }
 
     saveTimeAndChangeTimeUnit(event: FocusEvent, unit: TimeUnit): void {
+        this.ngxMaterialTimepickerDialService.setLastInputFocused(this);
         event.preventDefault();
         this.previousTime = this.time;
         this.timeUnitChanged.next(unit);
@@ -69,7 +72,9 @@ export class NgxMaterialTimepickerDialControlComponent {
     }
 
     onModelChange(value: string): void {
-        this.time = this.timeParserPipe.transform(value, this.timeUnit).toString();
+        this.time = this.timeParserPipe
+            .transform(value, this.timeUnit)
+            .toString();
     }
 
     private changeTimeByArrow(keyCode: number): void {
@@ -88,7 +93,22 @@ export class NgxMaterialTimepickerDialControlComponent {
             this.updateTime();
         }
     }
+    public changeTimeByVirtualArrow(keyCode: string): void {
+        const ARROW_UP = 'ARROW_UP';
+        const ARROW_DOWN = 'ARROW_DOWN';
+        let time: string;
+
+        if (keyCode === ARROW_UP) {
+            time = String(+this.time + (this.minutesGap || 1));
+        } else if (keyCode === ARROW_DOWN) {
+            time = String(+this.time - (this.minutesGap || 1));
+        }
 
+        if (!isTimeUnavailable(time, this.timeList)) {
+            this.time = time;
+            this.updateTime();
+        }
+    }
 }
 
 function isTimeDisabledToChange(currentTime: string, nextTime: string, timeList: ClockFaceTime[]): boolean {

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

@@ -1,7 +1,21 @@
 <div class="timepicker-dial">
     <div class="timepicker-dial__container">
+        <div class="timepicker-dial_arrows">
+            <i class="timepicker-dial_arrows_up" (click)="clickUp()"><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px"
+                xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <path class="arrow"
+                    d="M18.221,7.206l9.585,9.585c0.879,0.879,0.879,2.317,0,3.195l-0.8,0.801c-0.877,0.878-2.316,0.878-3.194,0  l-7.315-7.315l-7.315,7.315c-0.878,0.878-2.317,0.878-3.194,0l-0.8-0.801c-0.879-0.878-0.879-2.316,0-3.195l9.587-9.585  c0.471-0.472,1.103-0.682,1.723-0.647C17.115,6.524,17.748,6.734,18.221,7.206z"
+                    />
+            </svg></i>
+            <i class="timepicker-dial_arrows_down" (click)="clickDown()"><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px"
+                xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <path class="arrow"
+                    d="M14.77,23.795L5.185,14.21c-0.879-0.879-0.879-2.317,0-3.195l0.8-0.801c0.877-0.878,2.316-0.878,3.194,0  l7.315,7.315l7.316-7.315c0.878-0.878,2.317-0.878,3.194,0l0.8,0.801c0.879,0.878,0.879,2.316,0,3.195l-9.587,9.585  c-0.471,0.472-1.104,0.682-1.723,0.647C15.875,24.477,15.243,24.267,14.77,23.795z"
+                    />
+            </svg></i>
+        </div>
         <div class="timepicker-dial__time">
-            <ngx-material-timepicker-dial-control [timeList]="hours" [time]="hour" [timeUnit]="timeUnit.HOUR"
+            <ngx-material-timepicker-dial-control #hhComponent [timeList]="hours" [time]="hour" [timeUnit]="timeUnit.HOUR"
                                                   [isActive]="activeTimeUnit === timeUnit.HOUR"
                                                   [isEditable]="isEditable"
                                                   (timeUnitChanged)="changeTimeUnit($event)"
@@ -11,7 +25,7 @@
 
             </ngx-material-timepicker-dial-control>
             <span>:</span>
-            <ngx-material-timepicker-dial-control [timeList]="minutes" [time]="minute" [timeUnit]="timeUnit.MINUTE"
+            <ngx-material-timepicker-dial-control ##mmComponent [timeList]="minutes" [time]="minute" [timeUnit]="timeUnit.MINUTE"
                                                   [isActive]="activeTimeUnit === timeUnit.MINUTE"
                                                   [isEditable]="isEditable"
                                                   [minutesGap]="minutesGap"

src/app/material-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.scss

@@ -50,7 +50,6 @@
             font-size: 14px;
         }
     }
-
 }
 
 @media (max-device-width: 1023px) and (orientation: landscape) {
@@ -64,3 +63,11 @@
         }
     }
 }
+
+.timepicker-dial_arrows {
+    width: 32px;
+    margin-right: 50px;
+}
+.arrow {
+    fill: white;
+}