feat(timepicker): allow hiding the spinners

fix #510

Closes #519

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

@@ -3,9 +3,10 @@ import {NgbdTimepickerMeridian} from './meridian/timepicker-meridian';
 import {NgbdTimepickerSeconds} from './seconds/timepicker-seconds';
 import {NgbdTimepickerSteps} from './steps/timepicker-steps';
 import {NgbdTimepickerValidation} from './validation/timepicker-validation';
+import {NgbdTimepickerSpinners} from './spinners/timepicker-spinners';
 
 export const DEMO_DIRECTIVES = [NgbdTimepickerBasic, NgbdTimepickerMeridian, NgbdTimepickerSeconds,
-  NgbdTimepickerSteps, NgbdTimepickerValidation];
+  NgbdTimepickerSpinners, NgbdTimepickerSteps, NgbdTimepickerValidation];
 
 export const DEMO_SNIPPETS = {
   basic: {
@@ -17,6 +18,9 @@ export const DEMO_SNIPPETS = {
   seconds: {
     code: require('!!prismjs?lang=typescript!./seconds/timepicker-seconds'),
     markup: require('!!prismjs?lang=markup!./seconds/timepicker-seconds.html')},
+  spinners: {
+    code: require('!!prismjs?lang=typescript!./spinners/timepicker-spinners'),
+    markup: require('!!prismjs?lang=markup!./spinners/timepicker-spinners.html')},
   steps: {
     code: require('!!prismjs?lang=typescript!./steps/timepicker-steps'),
     markup: require('!!prismjs?lang=markup!./steps/timepicker-steps.html')},

demo/src/app/components/timepicker/demos/spinners/timepicker-spinners.html

@@ -0,0 +1,5 @@
+<ngb-timepicker [(ngModel)]="time" [spinners]="spinners"></ngb-timepicker>
+
+<button class="m-t-1 btn btn-sm btn-outline-{{spinners ? 'success' : 'danger'}}" (click)="toggleSpinners()">
+    Spinners - {{spinners ? "ON" : "OFF"}}
+</button>

demo/src/app/components/timepicker/demos/spinners/timepicker-spinners.ts

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {NGB_TIMEPICKER_DIRECTIVES} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ngbd-timepicker-spinners',
+  templateUrl: './timepicker-spinners.html',
+  directives: [NGB_TIMEPICKER_DIRECTIVES]
+})
+export class NgbdTimepickerSpinners {
+  time = {hour: 13, minute: 30};
+  spinners = true;
+
+  toggleSpinners() {
+      this.spinners = !this.spinners;
+  }
+}

demo/src/app/components/timepicker/timepicker.component.ts

@@ -17,6 +17,9 @@ import {DEMO_DIRECTIVES, DEMO_SNIPPETS} from './demos';
       <ngbd-example-box demoTitle="Seconds" [htmlSnippet]="snippets.seconds.markup" [tsSnippet]="snippets.seconds.code">
         <ngbd-timepicker-seconds></ngbd-timepicker-seconds>      
       </ngbd-example-box>
+      <ngbd-example-box demoTitle="Spinners" [htmlSnippet]="snippets.spinners.markup" [tsSnippet]="snippets.spinners.code">
+        <ngbd-timepicker-spinners></ngbd-timepicker-spinners>      
+      </ngbd-example-box>
       <ngbd-example-box demoTitle="Custom steps" [htmlSnippet]="snippets.steps.markup" [tsSnippet]="snippets.steps.code">
         <ngbd-timepicker-steps></ngbd-timepicker-steps>      
       </ngbd-example-box>

src/timepicker/timepicker.spec.ts

@@ -583,6 +583,18 @@ describe('ngb-timepicker', () => {
          });
        })));
   });
+
+  describe('spinners', () => {
+
+    it('should not have spinners if configured so', async(inject([TestComponentBuilder], (tcb) => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true" [spinners]="false"></ngb-timepicker>`;
+
+         tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
+           const buttons = getButtons(fixture.nativeElement);
+           expect(buttons.length).toBe(0);
+         });
+       })));
+  });
 });
 
 

src/timepicker/timepicker.ts

@@ -47,7 +47,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
   template: `
      <fieldset [disabled]="disabled" [class.disabled]="disabled">
       <table>
-        <tr>
+        <tr *ngIf="spinners">
           <td class="text-xs-center">
             <button class="btn-link" (click)="changeHour(hourStep)"
               [class.disabled]="disabled">
@@ -100,7 +100,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
             </td>
           </template>
         </tr>
-        <tr>
+        <tr *ngIf="spinners">
           <td class="text-xs-center">
             <button class="btn-link" (click)="changeHour(-hourStep)" 
               [class.disabled]="disabled">
@@ -141,6 +141,11 @@ export class NgbTimepicker implements ControlValueAccessor {
    */
   @Input() meridian = false;
 
+  /**
+   * Whether to display the spinners above and below the inputs.
+   */
+  @Input() spinners = true;
+
   /**
    * Whether to display seconds input.
    */