Merge pull request #322 from SAP/feature/#296

Feature/#296 add compact mode to time-picker

docs/modules/documentation/containers/time-picker/examples/time-picker-compact-example.component.html

@@ -0,0 +1,2 @@
+<fd-time-picker [compact]="true"
+                [time]="timeObject"></fd-time-picker><br>

docs/modules/documentation/containers/time-picker/examples/time-picker-examples.component.ts

@@ -39,3 +39,13 @@ export class TimePickerDisabledExampleComponent {
     timeObject = { hour: 12, minute: 0, second: 0 };
 
 }
+
+@Component({
+    selector: 'fd-time-picker-compact-example',
+    templateUrl: './time-picker-compact-example.component.html'
+})
+export class TimePickerCompactExampleComponent {
+
+    timeObject = { hour: 12, minute: 0, second: 0 };
+
+}

docs/modules/documentation/containers/time-picker/time-picker-docs.component.html

@@ -10,7 +10,8 @@ <h1>&lt;fd-time-picker&gt;</h1>
     { name: 'time', description: 'An object that contains three integer properties: \'hour\' (ranging from 0 to 23), \'minute\' (ranging from 0 to 59), and \'second\' (ranging from 0 to 59). ' },
     { name: 'meridian', description: 'When set to true, turns the time picker into a 12-hour clock with am/pm.  Default is false.'},
     { name: 'spinners', description: 'Boolean, when set to false, hides the buttons that increment and decrement the corresponding input. Default is true.'},
-    { name: 'disabled', description: 'Disables the time picker.'}
+    { name: 'disabled', description: 'Disables the time picker.'},
+    { name: 'compact', description: 'Uses compact time picker.'}
   ]
 }"></properties>
 
@@ -44,4 +45,12 @@ <h2>Disabled Time Picker</h2>
 <component-example [name]="'ex4'">
   <fd-time-picker-disabled-example></fd-time-picker-disabled-example>
 </component-example>
-<pre><code mwlHighlightJs language="HTML" [source]="disabledTimePickerHtml"></code></pre>
+<pre><code mwlHighlightJs language="HTML" [source]="disabledTimePickerHtml"></code></pre>
+
+<separator></separator>
+<h2>Compact Time Picker</h2>
+<description>Set <code>[compact]="true"</code> to use compact time-picker.</description>
+<component-example [name]="'ex5'">
+  <fd-time-picker-compact-example></fd-time-picker-compact-example>
+</component-example>
+<pre><code mwlHighlightJs language="HTML" [source]="compactTimePickerHtml"></code></pre>

docs/modules/documentation/containers/time-picker/time-picker-docs.component.ts

@@ -4,6 +4,7 @@ import * as timePickerSrc from '!raw-loader!./examples/time-picker-example.compo
 import * as timePickerMeridianSrc from '!raw-loader!./examples/time-picker-12-example.component.html';
 import * as timePickerDisabledSrc from '!raw-loader!./examples/time-picker-disabled-example.component.html';
 import * as timePickerNoSecondsSrc from '!raw-loader!./examples/time-picker-no-seconds-example.component.html';
+import * as timePickerCompactSrc from '!raw-loader!./examples/time-picker-compact-example.component.html';
 
 @Component({
     selector: 'app-time-picker',
@@ -14,6 +15,7 @@ export class TimePickerDocsComponent {
     meridianTimePickerHtml = timePickerMeridianSrc;
     timePickerNoSecondsHtml = timePickerNoSecondsSrc;
     disabledTimePickerHtml = timePickerDisabledSrc;
+    compactTimePickerHtml = timePickerCompactSrc;
 
     constructor() {}
 }

docs/modules/documentation/documentation.module.ts

@@ -174,7 +174,8 @@ import {
     TimePickerExampleComponent,
     TimePicker12ExampleComponent,
     TimePickerDisabledExampleComponent,
-    TimePickerNoSecondsExampleComponent
+    TimePickerNoSecondsExampleComponent,
+    TimePickerCompactExampleComponent
 } from './containers/time-picker/examples/time-picker-examples.component';
 
 import { InstallationDocsComponent } from './containers/installation/installation.component';
@@ -373,7 +374,8 @@ const ROUTES: Routes = [
         TimePickerExampleComponent,
         TimePicker12ExampleComponent,
         TimePickerDisabledExampleComponent,
-        TimePickerNoSecondsExampleComponent
+        TimePickerNoSecondsExampleComponent,
+        TimePickerCompactExampleComponent
     ],
     imports: [
         HighlightJsModule.forRoot({

library/src/lib/time-picker/time-picker.component.html

@@ -1,6 +1,7 @@
 <div class="fd-time-picker">
   <fd-popover [isOpen]="isOpen"
               [isTimePicker]="true"
+              [arrow]="false"
               (popoverClosed)="popoverClosed()">
     <fd-popover-control>
       <!--fd-input-group *ngIf="!meridian" (timeInputChanged)="timeInputChanged($event)" [type]="'time'"
@@ -12,16 +13,18 @@
                       [placeholder]="getPlaceholder()" [inputText]="getFormattedTime()" [disabled]="disabled"
                       (addOnButtonClicked)="addOnButtonClicked($event)"></fd-input-group-->
       <div class="fd-input-group fd-input-group--after"
-           (click)="inputGroupClicked($event)">
+           (click)="inputGroupClicked($event)"
+           [ngClass]="{'fd-input-group--compact' : compact}">
         <input value="{{getFormattedTime()}}"
                (change)="timeInputChanged($event.currentTarget.value)"
                [disabled]="disabled"
                type="text"
+               [ngClass]="{ 'fd-input--compact': compact }"
                placeholder="{{getPlaceholder()}}">
         <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--after">
           <button [disabled]="disabled"
-                  class="fd-button--icon fd-button--light sap-icon--fob-watch"
-                  (click)="addOnButtonClicked($event)"></button>
+                  [ngClass]="{ 'fd-button--compact' : compact }" (click)="addOnButtonClicked($event)"
+                  class="fd-button--icon fd-button--light sap-icon--fob-watch"></button>
         </span>
       </div>
     </fd-popover-control>

library/src/lib/time-picker/time-picker.component.ts

@@ -10,6 +10,9 @@ export class TimePickerComponent {
     @Input()
     time: TimeObject = { hour: 0, minute: 0, second: 0 };
 
+    @Input()
+    compact: boolean = false;
+
     @Input()
     meridian: boolean;