Add seconds support for time-picker component

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss

@@ -47,6 +47,11 @@
         @extend %time-picker__minuteList !optional;
     }
 
+    // SECONDS
+    @include e(secondsList) {
+        @extend %time-picker__secondsList !optional;
+    }
+
     // AM PM
     @include e(ampmList) {
         @extend %time-picker__ampmList !optional;

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -203,6 +203,10 @@
         }
     }
 
+    %time-picker__secondsList {
+        text-align: center;
+    }
+
     %time-picker__ampmList {
         display: flex;
         flex-direction: column;

projects/igniteui-angular/src/lib/time-picker/README.md

@@ -120,6 +120,8 @@ List of time-flags:
 "HH": hours field in 24-hours format with leading zero
 "m": minutes field without leading zero
 "mm": minutes field with leading zero
+"s": seconds field without leading zero
+"ss": seconds field with leading zero
 "tt": 2 characters of string which represents AM/PM field |
 | `isSpinLoop` | boolean | Determines the spin behavior. By default `isSpinLoop` is set to true. |
 | `mode` | InteractionMode | Determines the interaction mode - a dialog picker or a dropdown with editable masked input. Default is dialog picker.|

projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts

@@ -8,27 +8,33 @@ export const IGX_TIME_PICKER_COMPONENT = 'IgxTimePickerComponentToken';
 export interface IgxTimePickerBase {
     hourList: ElementRef;
     minuteList: ElementRef;
+    secondsList: ElementRef;
     ampmList: ElementRef;
     selectedHour: string;
     selectedMinute: string;
+    selectedSeconds: string;
     selectedAmPm: string;
     format: string;
     promptChar: string;
     cleared: boolean;
     mode: InteractionMode;
     showHoursList: boolean;
     showMinutesList: boolean;
+    showSecondsList: boolean;
     showAmPmList: boolean;
     nextHour();
     prevHour();
     nextMinute();
     prevMinute();
+    nextSeconds();
+    prevSeconds();
     nextAmPm();
     prevAmPm();
     okButtonClick(): boolean;
     cancelButtonClick(): void;
     scrollHourIntoView(item: string): void;
     scrollMinuteIntoView(item: string): void;
+    scrollSecondsIntoView(item: string): void;
     scrollAmPmIntoView(item: string): void;
     close(): void;
     parseMask(preserveAmPm?: boolean): string;

projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

@@ -39,7 +39,7 @@
     <div *ngIf="mode === 'dialog'" class="igx-time-picker__header">
         <h5 class="igx-time-picker__header-ampm">{{ selectedAmPm }}</h5>
         <h2 class="igx-time-picker__header-hour">
-            <span>{{ selectedHour }}</span>:<span>{{ selectedMinute }}</span>
+            <span>{{ selectedHour }}</span>:<span>{{ selectedMinute }}</span>:<span>{{ selectedSeconds }}</span>
         </h2>
     </div>
     <div class="igx-time-picker__main">
@@ -50,10 +50,15 @@ <h2 class="igx-time-picker__header-hour">
             <div *ngIf="showMinutesList" #minuteList [igxItemList]="'minuteList'">
                 <span [igxMinuteItem]="minute" *ngFor="let minute of minuteView">{{ minute }}</span>
             </div>
+            <div *ngIf="showSecondsList" #secondsList [igxItemList]="'secondsList'">
+                <span [igxSecondsItem]="seconds" *ngFor="let seconds of secondsView">{{ seconds }}</span>
+            </div>
             <div *ngIf="showAmPmList" #ampmList [igxItemList]="'ampmList'">
                 <span [igxAmPmItem]="ampm" *ngFor="let ampm of ampmView">{{ ampm }}</span>
             </div>
         </div>
-        <ng-container *ngTemplateOutlet="timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions"></ng-container>
+        <ng-container
+            *ngTemplateOutlet="timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions">
+        </ng-container>
     </div>
-</div>
+</div>