feat(timepicker): add input and meridian button sizing

Closes #1094 Closes #1258
ng-bootstrap · Feb 1, 2017 · 89c1e6b · 89c1e6b
1 parent 92674a6
commit 89c1e6b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/src/timepicker/timepicker-config.spec.ts b/src/timepicker/timepicker-config.spec.ts
@@ -12,5 +12,6 @@ describe('ngb-timepicker-config', () => {
     expect(config.secondStep).toBe(1);
     expect(config.disabled).toBe(false);
     expect(config.readonlyInputs).toBe(false);
+    expect(config.size).toBe('medium');
   });
 });
diff --git a/src/timepicker/timepicker-config.ts b/src/timepicker/timepicker-config.ts
@@ -15,4 +15,5 @@ export class NgbTimepickerConfig {
   secondStep = 1;
   disabled = false;
   readonlyInputs = false;
+  size: 'small' | 'medium' | 'large' = 'medium';
 }
diff --git a/src/timepicker/timepicker.spec.ts b/src/timepicker/timepicker.spec.ts
@@ -59,6 +59,7 @@ function expectSameValues(timepicker: NgbTimepicker, config: NgbTimepickerConfig
   expect(timepicker.secondStep).toBe(config.secondStep);
   expect(timepicker.disabled).toBe(config.disabled);
   expect(timepicker.readonlyInputs).toBe(config.readonlyInputs);
+  expect(timepicker.size).toBe(config.size);
 }
 
 function customizeConfig(config: NgbTimepickerConfig) {

diff --git a/src/timepicker/timepicker.ts b/src/timepicker/timepicker.ts
@@ -32,14 +32,14 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
       vertical-align: middle;
       width: 0.71em;
     }
-    
+
     .chevron.bottom:before {
       top: -.3em;
       -webkit-transform: rotate(135deg);
       -ms-transform: rotate(135deg);
       transform: rotate(135deg);
     }
-    
+
     .btn-link {
       outline: 0;
     }
@@ -48,7 +48,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
       cursor: not-allowed;
       opacity: .65;
     }
-    
+
     input {
       text-align: center;
     }
@@ -86,32 +86,33 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
         </tr>
         <tr>
           <td>
-            <input type="text" class="form-control" maxlength="2" size="2" placeholder="HH"
-              [value]="formatHour(model?.hour)" (change)="updateHour($event.target.value)" 
+            <input type="text" class="form-control" [ngClass]="setFormControlSize()" maxlength="2" size="2" placeholder="HH"
+              [value]="formatHour(model?.hour)" (change)="updateHour($event.target.value)"
               [readonly]="readonlyInputs" [disabled]="disabled">
           </td>
           <td>&nbsp;:&nbsp;</td>
           <td>
-            <input type="text" class="form-control" maxlength="2" size="2" placeholder="MM"
-              [value]="formatMinSec(model?.minute)" (change)="updateMinute($event.target.value)" 
+            <input type="text" class="form-control" [ngClass]="setFormControlSize()" maxlength="2" size="2" placeholder="MM"
+              [value]="formatMinSec(model?.minute)" (change)="updateMinute($event.target.value)"
               [readonly]="readonlyInputs" [disabled]="disabled">
           </td>
           <template [ngIf]="seconds">
             <td>&nbsp;:&nbsp;</td>
-            <input type="text" class="form-control" maxlength="2" size="2" placeholder="SS"
-              [value]="formatMinSec(model?.second)" (change)="updateSecond($event.target.value)" 
+            <input type="text" class="form-control" [ngClass]="setFormControlSize()" maxlength="2" size="2" placeholder="SS"
+              [value]="formatMinSec(model?.second)" (change)="updateSecond($event.target.value)"
               [readonly]="readonlyInputs" [disabled]="disabled">
           </template>
           <template [ngIf]="meridian">
             <td>&nbsp;&nbsp;</td>
             <td>
-              <button type="button" class="btn btn-outline-primary" (click)="toggleMeridian()">{{model.hour >= 12 ? 'PM' : 'AM'}}</button>
+              <button type="button" class="btn btn-outline-primary" [ngClass]="setMeridanSize()"
+                (click)="toggleMeridian()">{{model.hour >= 12 ? 'PM' : 'AM'}}</button>
             </td>
           </template>
         </tr>
         <tr *ngIf="spinners">
           <td class="text-center">
-            <button type="button" class="btn-link" (click)="changeHour(-hourStep)" 
+            <button type="button" class="btn-link" (click)="changeHour(-hourStep)"
               [disabled]="disabled" [class.disabled]="disabled">
               <span class="chevron bottom"></span>
             </button>
@@ -182,6 +183,11 @@ export class NgbTimepicker implements ControlValueAccessor,
    */
   @Input() readonlyInputs: boolean;
 
+  /**
+   * To set the size of the inputs and button
+   */
+  @Input() size: 'small' | 'medium' | 'large';
+
   constructor(config: NgbTimepickerConfig) {
     this.meridian = config.meridian;
     this.spinners = config.spinners;
@@ -191,6 +197,7 @@ export class NgbTimepicker implements ControlValueAccessor,
     this.secondStep = config.secondStep;
     this.disabled = config.disabled;
     this.readonlyInputs = config.readonlyInputs;
+    this.size = config.size;
   }
 
   onChange = (_: any) => {};
@@ -259,6 +266,10 @@ export class NgbTimepicker implements ControlValueAccessor,
 
   formatMinSec(value: number) { return padNumber(value); }
 
+  setFormControlSize() { return {'form-control-sm': this.size === 'small', 'form-control-lg': this.size === 'large'}; }
+
+  setMeridanSize() { return {'btn-sm': this.size === 'small', 'btn-lg': this.size === 'large'}; }
+
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['seconds'] && !this.seconds && this.model && !isNumber(this.model.second)) {