feat(timepicker): showMinutes flag for toggle MinutesField in timepic…

…ker(#2430) (#3341)

closes #2430

demo/src/app/components/+timepicker/demos/config/config.ts

@@ -9,7 +9,9 @@ export function getTimepickerConfig(): TimepickerConfig {
     minuteStep: 10,
     showMeridian: false,
     readonlyInput: false,
-    mousewheel: true
+    mousewheel: true,
+    showMinutes: true,
+    showSeconds: false
   });
 }
 

demo/src/app/components/+timepicker/demos/index.ts

@@ -5,7 +5,7 @@ import { DemoTimepickerDisabledComponent } from './disabled/disabled';
 import { DemoTimepickerCustomComponent } from './custom/custom';
 import { DemoTimepickerDynamicComponent } from './dynamic/dynamic';
 import { DemoTimepickerMinMaxComponent } from './min-max/min-max';
-import { DemoTimepickerSecondsComponent } from './seconds/seconds';
+import { DemoTimepickerToggleMinutesSecondsComponent } from './toggle-minutes-seconds/toggle-minutes-seconds';
 import { DemoTimepickerMousewheelArrowkeysComponent } from './mousewheel-arrowkeys/mousewheel-arrowkeys';
 import { DemoTimepickerCustomValidationComponent } from './custom-validation/custom-validation';
 
@@ -17,7 +17,7 @@ export const DEMO_COMPONENTS = [
   DemoTimepickerDisabledComponent,
   DemoTimepickerCustomComponent,
   DemoTimepickerDynamicComponent,
-  DemoTimepickerSecondsComponent,
+  DemoTimepickerToggleMinutesSecondsComponent,
   DemoTimepickerMousewheelArrowkeysComponent,
   DemoTimepickerCustomValidationComponent
 ];

demo/src/app/components/+timepicker/demos/toggle-minutes-seconds/toggle-minutes-seconds.html

@@ -0,0 +1,10 @@
+<timepicker [(ngModel)]="myTime" [showMinutes]="showMin" [showSeconds]="showSec"></timepicker>
+
+<pre class="alert alert-info">Time is: {{myTime}}<br>showMinutes: {{showMin}}<br>showSeconds: {{showSec}}</pre>
+
+<button class="btn btn-default text-center" (click)="toggleMinutes()">
+  {{showMin? 'Hide minutes' : 'Show minutes'}}
+</button>
+<button class="btn btn-default text-center" (click)="toggleSeconds()">
+  {{showSec? 'Hide seconds' : 'Show seconds'}}
+</button>

demo/src/app/components/+timepicker/demos/toggle-minutes-seconds/toggle-minutes-seconds.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-seconds',
+  templateUrl: './toggle-minutes-seconds.html'
+})
+export class DemoTimepickerToggleMinutesSecondsComponent {
+  myTime: Date = new Date();
+  showMin: boolean = true;
+  showSec: boolean = true;
+
+  toggleMinutes(): void {
+    this.showMin = !this.showMin;
+  }
+
+  toggleSeconds(): void {
+    this.showSec = !this.showSec;
+  }
+
+}

demo/src/app/components/+timepicker/timepicker-section.list.ts

@@ -1,7 +1,7 @@
 import { DemoTimepickerBasicComponent } from './demos/basic/basic';
 import { DemoTimepickerMeridianComponent } from './demos/meridian/meridian';
 import { DemoTimepickerMinMaxComponent } from './demos/min-max/min-max';
-import { DemoTimepickerSecondsComponent } from './demos/seconds/seconds';
+import { DemoTimepickerToggleMinutesSecondsComponent } from './demos/toggle-minutes-seconds/toggle-minutes-seconds';
 import { DemoTimepickerDisabledComponent } from './demos/disabled/disabled';
 import { DemoTimepickerCustomComponent } from './demos/custom/custom';
 import { DemoTimepickerCustomValidationComponent } from './demos/custom-validation/custom-validation';
@@ -55,11 +55,11 @@ export const demoComponentContent: ContentSection[] = [
         outlet: DemoTimepickerMinMaxComponent
       },
       {
-        title: 'Show seconds',
-        anchor: 'seconds',
-        component: require('!!raw-loader?lang=typescript!./demos/seconds/seconds'),
-        html: require('!!raw-loader?lang=markup!./demos/seconds/seconds.html'),
-        outlet: DemoTimepickerSecondsComponent
+        title: 'Toggle minutes/seconds',
+        anchor: 'toggleMinutesSeconds',
+        component: require('!!raw-loader?lang=typescript!./demos/toggle-minutes-seconds/toggle-minutes-seconds'),
+        html: require('!!raw-loader?lang=markup!./demos/toggle-minutes-seconds/toggle-minutes-seconds.html'),
+        outlet: DemoTimepickerToggleMinutesSecondsComponent
       },
       {
         title: 'Disabled',

demo/src/ng-api-doc.ts

@@ -2791,10 +2791,15 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": ""
       },
+      {
+        "name": "showMinutes",
+        "type": "boolean",
+        "description": "<p>if true minutes in timepicker will be shown</p>\n"
+      },
       {
         "name": "showSeconds",
         "type": "boolean",
-        "description": ""
+        "description": "<p>if true seconds in timepicker will be shown</p>\n"
       },
       {
         "name": "showSpinners",
@@ -2874,6 +2879,12 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM </p>\n"
       },
+      {
+        "name": "showMinutes",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>show minutes in timepicker </p>\n"
+      },
       {
         "name": "showSeconds",
         "defaultValue": "false",

src/spec/timepicker/timepicker.component.spec.ts

@@ -287,6 +287,20 @@ describe('Component: timepicker', () => {
     });
   });
 
+  describe('hide minutes fields with property of showMinutes', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TimepickerComponent);
+      fixture.detectChanges();
+      component = fixture.componentInstance;
+      inputMinutes = getInputElements(fixture)[1];
+    });
+    it('should hide minutes field when property showMinutes is == false', () => {
+      component.showMinutes = false;
+      fixture.detectChanges();
+      expect(inputSeconds).toBeFalsy();
+    });
+  });
+
   describe('display seconds fields with property of showSeconds', () => {
     beforeEach(() => {
       fixture = TestBed.createComponent(TimepickerComponent);
@@ -939,6 +953,17 @@ describe('Component: timepicker', () => {
       expect(inputHours.value).toBe('');
       expect(inputMinutes.value).toBe('');
     });
+
+    it('should ignore minutes for validation if showMinutes flag == false', () => {
+      component.showMinutes = false;
+      const methodSpy = spyOn(component, 'onChange').and.callThrough();
+      component.hours = '12';
+      component.minutes = '99';
+      component._updateTime();
+      fixture.detectChanges();
+      expect(methodSpy).not.toHaveBeenCalled();
+    });
+
     // не верное значение поля должно сбрасывать время
     it('should clear model if values are invalid', () => {
       component.showSeconds = true;

src/timepicker/timepicker.component.html

@@ -8,9 +8,9 @@
       ><span class="bs-chevron bs-chevron-up"></span></a>
     </td>
     <!-- divider -->
-    <td>&nbsp;&nbsp;&nbsp;</td>
+    <td *ngIf="showMinutes">&nbsp;&nbsp;&nbsp;</td>
     <!-- increment minutes button -->
-    <td>
+    <td *ngIf="showMinutes">
       <a class="btn btn-link" [class.disabled]="!canIncrementMinutes"
          (click)="changeMinutes(minuteStep)"
       ><span class="bs-chevron bs-chevron-up"></span></a>
@@ -43,9 +43,9 @@
              (keydown.ArrowDown)="changeHours(-hourStep, 'key')"
              (change)="updateHours($event.target.value)"></td>
     <!-- divider -->
-    <td>&nbsp;:&nbsp;</td>
+    <td *ngIf="showMinutes">&nbsp;:&nbsp;</td>
     <!-- minutes -->
-    <td class="form-group" [class.has-error]="invalidMinutes">
+    <td class="form-group" *ngIf="showMinutes"[class.has-error]="invalidMinutes">
       <input type="text"
              class="form-control text-center bs-timepicker-field"
              placeholder="MM"
@@ -94,9 +94,9 @@
       </a>
     </td>
     <!-- divider -->
-    <td>&nbsp;&nbsp;&nbsp;</td>
+    <td *ngIf="showMinutes">&nbsp;&nbsp;&nbsp;</td>
     <!-- decrement minutes button-->
-    <td>
+    <td *ngIf="showMinutes">
       <a class="btn btn-link" [class.disabled]="!canDecrementMinutes"
          (click)="changeMinutes(-minuteStep)">
         <span class="bs-chevron bs-chevron-down"></span>

src/timepicker/timepicker.component.ts

@@ -25,7 +25,7 @@ import {
   isValidDate,
   padNumber,
   parseTime,
-  isInputValid
+  isInputValid, parseSeconds
 } from './timepicker.utils';
 import { fakeAsync } from '@angular/core/testing';
 
@@ -85,12 +85,14 @@ export class TimepickerComponent
   @Input() arrowkeys: boolean;
   /** if true spinner arrows above and below the inputs will be shown */
   @Input() showSpinners: boolean;
+  /** if true meridian button will be shown */
   @Input() showMeridian: boolean;
+  /** show minutes in timepicker */
+  @Input() showMinutes: boolean;
+  /** show seconds in timepicker */
   @Input() showSeconds: boolean;
-
   /** meridian labels based on locale */
   @Input() meridians: string[];
-
   /** minimum time user can select */
   @Input() min: Date;
   /** maximum time user can select */
@@ -205,7 +207,8 @@ export class TimepickerComponent
 
   _updateTime() {
     const _seconds = this.showSeconds ? this.seconds : void 0;
-    if (!isInputValid(this.hours, this.minutes, _seconds, this.isPM())) {
+    const _minutes = this.showMinutes ? this.minutes : void 0;
+    if (!isInputValid(this.hours, _minutes, _seconds, this.isPM())) {
       this.isValid.emit(false);
       this.onChange(null);
 

src/timepicker/timepicker.config.ts

@@ -23,6 +23,8 @@ export class TimepickerConfig {
   showSpinners = true;
   /** show seconds in timepicker */
   showSeconds = false;
+  /** show minutes in timepicker */
+  showMinutes = true;
   /** minimum time user can select */
   min: Date;
   /** maximum time user can select */

src/timepicker/timepicker.utils.ts

@@ -159,7 +159,7 @@ export function padNumber(value: number): string {
 
 export function isInputValid(
   hours: string,
-  minutes: string,
+  minutes = '0',
   seconds = '0',
   isPM: boolean
 ): boolean {