From 7adfc64ebef993814a9b5b2e88b13fb83a84e2b9 Mon Sep 17 00:00:00 2001
From: fbasso <fabrice.basso@amadeus.com>
Date: Thu, 13 Jun 2019 15:50:55 +0200
Subject: [PATCH] feat(timepicker): activate type="number" for inputs

---
 .../navigation/timepicker-navigation.e2e-spec.ts  | 15 ++++++++++++++-
 src/timepicker/timepicker.scss                    |  7 +++++++
 src/timepicker/timepicker.ts                      |  6 +++---
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/e2e-app/src/app/timepicker/navigation/timepicker-navigation.e2e-spec.ts b/e2e-app/src/app/timepicker/navigation/timepicker-navigation.e2e-spec.ts
index 0126769937..e09246d4fb 100644
--- a/e2e-app/src/app/timepicker/navigation/timepicker-navigation.e2e-spec.ts
+++ b/e2e-app/src/app/timepicker/navigation/timepicker-navigation.e2e-spec.ts
@@ -1,4 +1,4 @@
-import {Key, ElementFinder} from 'protractor';
+import {Key, ElementFinder, browser} from 'protractor';
 
 import {openUrl, expectFocused, sendKey, getCaretPosition} from '../../tools.po';
 
@@ -45,6 +45,16 @@ describe('Timepicker', () => {
   describe('arrow keys', () => {
     it(`should keep caret at the end of the input`, async() => {
       const testField = async(fieldElement: ElementFinder) => {
+
+        const type = await browser.executeScript(
+            `
+          var element = arguments[0];
+          var type = element.getAttribute('type');
+          element.setAttribute('type', 'text');
+          return type;
+        `,
+            fieldElement.getWebElement());
+
         await fieldElement.click();
 
         const endPosition = 2;
@@ -67,6 +77,9 @@ describe('Timepicker', () => {
 
         await sendKey(Key.ARROW_DOWN);
         await expectCaretAtEnd();
+
+        await browser.executeScript(
+            `arguments[0].setAttribute('type', arguments[1]);`, fieldElement.getWebElement(), type);
       };
 
       for (const fieldElement of page.getFields()) {
diff --git a/src/timepicker/timepicker.scss b/src/timepicker/timepicker.scss
index 16613230e3..b9f07a5fc8 100644
--- a/src/timepicker/timepicker.scss
+++ b/src/timepicker/timepicker.scss
@@ -33,6 +33,13 @@ ngb-timepicker {
 
   &-input {
     text-align: center;
+    appearance: textfield;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      appearance: none;
+      margin: 0;
+    }
   }
 
   &-hour,
diff --git a/src/timepicker/timepicker.ts b/src/timepicker/timepicker.ts
index c6ffba5f7d..49b7c002e7 100644
--- a/src/timepicker/timepicker.ts
+++ b/src/timepicker/timepicker.ts
@@ -37,7 +37,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
             <span class="chevron ngb-tp-chevron"></span>
             <span class="sr-only" i18n="@@ngb.timepicker.increment-hours">Increment hours</span>
           </button>
-          <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
+          <input type="number" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
             maxlength="2" placeholder="HH" i18n-placeholder="@@ngb.timepicker.HH"
             [value]="formatHour(model?.hour)" (change)="updateHour($event.target.value)"
             [readOnly]="readonlyInputs" [disabled]="disabled" aria-label="Hours" i18n-aria-label="@@ngb.timepicker.hours"
@@ -58,7 +58,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
             <span class="chevron ngb-tp-chevron"></span>
             <span class="sr-only" i18n="@@ngb.timepicker.increment-minutes">Increment minutes</span>
           </button>
-          <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
+          <input type="number" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
             maxlength="2" placeholder="MM" i18n-placeholder="@@ngb.timepicker.MM"
             [value]="formatMinSec(model?.minute)" (change)="updateMinute($event.target.value)"
             [readOnly]="readonlyInputs" [disabled]="disabled" aria-label="Minutes" i18n-aria-label="@@ngb.timepicker.minutes"
@@ -79,7 +79,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
             <span class="chevron ngb-tp-chevron"></span>
             <span class="sr-only" i18n="@@ngb.timepicker.increment-seconds">Increment seconds</span>
           </button>
-          <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
+          <input type="number" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
             maxlength="2" placeholder="SS" i18n-placeholder="@@ngb.timepicker.SS"
             [value]="formatMinSec(model?.second)" (change)="updateSecond($event.target.value)"
             [readOnly]="readonlyInputs" [disabled]="disabled" aria-label="Seconds" i18n-aria-label="@@ngb.timepicker.seconds"