Merge pull request #9418 from IgniteUI/PMiteva/time-picker-pipe

Create TimeItemsPipe

Author: Lipata

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

@@ -12,14 +12,25 @@ export interface IgxTimePickerBase {
     ampmList: ElementRef;
     inputFormat: string;
     itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'>;
+	spinLoop: boolean;
     selectedDate: Date;
     maxDropdownValue: Date;
     minDropdownValue: Date;
+    isTwelveHourFormat: boolean;
+    showHoursList: boolean;
+    showMinutesList: boolean;
+    showSecondsList: boolean;
+    showAmPmList: boolean;
+    minDateValue: Date;
+    maxDateValue: Date;
     nextHour(delta: number);
     nextMinute(delta: number);
     nextSeconds(delta: number);
     nextAmPm(delta: number);
     close(): void;
     cancelButtonClick(): void;
     onItemClick(item: string, dateType: string): void;
+    setSelectedValue(): void;
+    getPartValue(value: Date, type: string): string;
+    toISOString(value: Date): string;
 }

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

@@ -56,31 +56,31 @@ <h2 class="igx-time-picker__header-hour">
                     [attr.aria-valuenow]="timeItem.isSelectedTime ? timeItem.hourValue : null"
                     [attr.aria-valuemin]="timeItem.isSelectedTime ? timeItem.minValue : null"
                     [attr.aria-valuemax]="timeItem.isSelectedTime ? timeItem.maxValue : null"
-                    *ngFor="let hour of hourView">{{ hour }}</span>
+                    *ngFor="let hour of (hourItems|timeItemPipe:'hour': this.selectedDate: this.minValue: this.maxValue)">{{ hour }}</span>
             </div>
             <div *ngIf="this.showMinutesList" #minuteList [igxItemList]="'minuteList'">
                 <span [igxTimeItem]="minute" #timeItem="timeItem" aria-label="minutes"
                     [attr.role]="timeItem.isSelectedTime ? 'spinbutton' : null"
                     [attr.aria-valuenow]="timeItem.isSelectedTime ? minute : null"
                     [attr.aria-valuemin]="timeItem.isSelectedTime ? timeItem.minValue : null"
                     [attr.aria-valuemax]="timeItem.isSelectedTime ? timeItem.maxValue : null"
-                    *ngFor="let minute of minuteView">{{ minute }}</span>
+                    *ngFor="let minute of (minuteItems|timeItemPipe:'minutes': this.selectedDate: this.minValue: this.maxValue)">{{ minute }}</span>
             </div>
             <div *ngIf="this.showSecondsList" #secondsList [igxItemList]="'secondsList'">
                 <span [igxTimeItem]="seconds" #timeItem="timeItem" aria-label="seconds"
                     [attr.role]="timeItem.isSelectedTime ? 'spinbutton' : null"
                     [attr.aria-valuenow]="timeItem.isSelectedTime ? seconds : null"
                     [attr.aria-valuemin]="timeItem.isSelectedTime ? timeItem.minValue : null"
                     [attr.aria-valuemax]="timeItem.isSelectedTime ? timeItem.maxValue : null"
-                    *ngFor="let seconds of secondsView">{{ seconds }}</span>
+                    *ngFor="let seconds of (secondsItems|timeItemPipe:'seconds': this.selectedDate: this.minValue: this.maxValue)">{{ seconds }}</span>
             </div>
             <div *ngIf="this.showAmPmList" #ampmList [igxItemList]="'ampmList'">
                 <span [igxTimeItem]="ampm" #timeItem="timeItem" aria-label="ampm"
                     [attr.role]="timeItem.isSelectedTime ? 'spinbutton' : null"
                     [attr.aria-valuenow]="timeItem.isSelectedTime ? ampm : null"
                     [attr.aria-valuemin]="timeItem.isSelectedTime ? timeItem.minValue : null"
                     [attr.aria-valuemax]="timeItem.isSelectedTime ? timeItem.maxValue : null"
-                    *ngFor="let ampm of ampmView">{{ ampm }}</span>
+                    *ngFor="let ampm of (ampmItems|timeItemPipe:'ampm': this.selectedDate: this.minValue: this.maxValue)">{{ ampm }}</span>
             </div>
         </div>
         <ng-container

projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

@@ -83,7 +83,8 @@ describe('IgxTimePicker', () => {
             (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective;
             const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', { collapsed: true });
             (timePicker as any).toggleRef = mockToggleDirective;
-            timePicker.ngOnInit();
+            timePicker.minDropdownValue = timePicker.minDateValue;
+            timePicker.maxDropdownValue = timePicker.maxDateValue;
 
             const date = new Date(2020, 12, 12, 10, 30, 30);
             timePicker.value = new Date(date);
@@ -139,8 +140,8 @@ describe('IgxTimePicker', () => {
 
             const date = new Date(2020, 12, 12, 10, 30, 30);
             timePicker.value = new Date(date);
-
-            timePicker.ngOnInit();
+            timePicker.minDropdownValue = timePicker.minDateValue;
+            timePicker.maxDropdownValue = timePicker.maxDateValue;
 
             const selectedDate = new Date(2020, 12, 12, 6, 45, 0);
             spyOn(timePicker.valueChange, 'emit').and.callThrough();
@@ -159,7 +160,8 @@ describe('IgxTimePicker', () => {
             timePicker.value = new Date(date);
             timePicker.minValue = new Date(2020, 12, 12, 6, 0, 0);
             timePicker.maxValue = new Date(2020, 12, 12, 16, 0, 0);
-            timePicker.ngOnInit();
+            timePicker.minDropdownValue = timePicker.minDateValue;
+            timePicker.maxDropdownValue = timePicker.maxDateValue;
 
             const selectedDate = new Date(2020, 12, 12, 3, 45, 0);
             const args: IgxTimePickerValidationFailedEventArgs = {
@@ -181,13 +183,16 @@ describe('IgxTimePicker', () => {
             timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector, null);
             timePicker['dateTimeEditor'] = mockDateTimeEditorDirective;
             timePicker['inputDirective'] = mockInputDirective;
+            timePicker.minDropdownValue = timePicker.minDateValue;
+            timePicker.maxDropdownValue = timePicker.maxDateValue;
             timePicker.ngOnInit();
             timePicker.registerOnChange(mockNgControl.registerOnChangeCb);
             timePicker.registerOnTouched(mockNgControl.registerOnTouchedCb);
 
-             expect(timePicker.value).toBeUndefined();
+            expect(timePicker.value).toBeUndefined();
             expect(mockNgControl.registerOnChangeCb).not.toHaveBeenCalled();
             timePicker.writeValue(date);
+            timePicker.setSelectedValue();
             expect(timePicker.value).toBe(date);
 
             timePicker.nextHour(100);