Merge pull request #273 from IgniteUI/dkamburov/timepicker

 Add TimePickerComponent

Author: mpavlinov

package.json

@@ -44,7 +44,7 @@
     "@types/node": "^6.0.46",
     "@types/jasmine": "^2.5.36",
     "@types/reflect-metadata": "^0.0.5",
-    "@types/ignite-ui": "^0.0.4",
+    "@types/ignite-ui": "^18.1.1",
     "@types/jquery": "2.0.47",
     "rollup": "^0.52.1",
     "rollup-plugin-node-resolve": "^3.0.0",

samples/igEditors/app.ts

@@ -1,6 +1,6 @@
 import { Component, NgModule } from '@angular/core';
 import { IgCurrencyEditorComponent, IgDateEditorComponent, IgMaskEditorComponent, IgNumericEditorComponent, 
-	IgPercentEditorComponent, IgTextEditorComponent, IgDatePickerComponent } from "../../src/igniteui.angular2";
+	IgPercentEditorComponent, IgTextEditorComponent, IgDatePickerComponent, IgTimePickerComponent } from "../../src/igniteui.angular2";
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';
@@ -22,14 +22,14 @@ export class AppComponent {
 			numeric: 123,
 			percent: 0.12,
 			text: 'Ignite UI'
-		};
+        };
 	}
 }
 
 @NgModule({
 	imports:	  [ BrowserModule, FormsModule ],
 	declarations: [ AppComponent, IgCurrencyEditorComponent, IgDateEditorComponent, IgMaskEditorComponent, IgNumericEditorComponent, 
-	IgPercentEditorComponent, IgTextEditorComponent, IgDatePickerComponent ],
+	IgPercentEditorComponent, IgTextEditorComponent, IgDatePickerComponent, IgTimePickerComponent ],
 	bootstrap:	[ AppComponent ]
 })
 export class AppModule {}

samples/igEditors/igEditorsTemplate.html

@@ -41,6 +41,11 @@
 				<td>igDatePicker</td>
 				<td><input class="form-control" type="text" id="datePicker11" [(ngModel)]="editors.date" /></td>
 				<td><ig-date-picker widgetId="datePicker1" [(ngModel)]="editors.date"  [options]="{width:'100%'}"></ig-date-picker></td>
+            </tr>
+            <tr>
+				<td>igTimePicker</td>
+				<td><input class="form-control" type="text" id="timePicker11" [(ngModel)]="editors.date" /></td>
+				<td><ig-time-picker widgetId="timePicker1" [(ngModel)]="editors.date"  [options]="{width:'100%',isLimitedToListValues:false}"></ig-time-picker></td>
 			</tr>
 		</tbody>
 	</table>

src/igcontrolbase/igcontrolbase.ts

@@ -8,6 +8,7 @@ var NODES = {
 	"ig-percent-editor": "input",
 	"ig-mask-editor": "input",
 	"ig-date-picker": "input",
+	"ig-time-picker": "input",
 	"ig-date-editor": "input",
 	"ig-currency-editor": "input",
 	"ig-checkbox-editor": "input",

src/igeditors/igtimepicker.component.ts

@@ -0,0 +1,91 @@
+import { Component, ElementRef, Renderer, IterableDiffers, Optional, KeyValueDiffers, ChangeDetectorRef } from "@angular/core";
+import { IgEditorBase } from "./igeditorbase";
+import { NgModel } from "@angular/forms";
+
+
+@Component({
+    selector: "ig-time-picker",
+    template: "<ng-content></ng-content>",
+    inputs: ["widgetId", "options", "disabled", "create", "locale", "language", "regional", "width", "height", "value", "tabIndex", "allowNullValue", "nullValue", "inputName", "readOnly", "validatorOptions", "buttonType", "listItems", "listWidth", "listItemHoverDuration", "dropDownAttachedToBody", "dropDownAnimationDuration", "visibleItemsCount", "includeKeys", "excludeKeys", "textAlign", "placeHolder", "selectionOnFocus", "textMode", "spinWrapAround", "isLimitedToListValues", "revertIfNotValid", "preventSubmitOnEnter", "dropDownOrientation", "maxLength", "dropDownOnReadOnly", "toUpper", "toLower", "suppressNotifications", "suppressKeyboard", "inputMask", "dataMode", "unfilledCharsPrompt", "padChar", "emptyChar", "minValue", "maxValue", "dateDisplayFormat", "dateInputFormat", "displayTimeOffset", "spinDelta", "limitSpinToCurrentField", "enableUTCDates", "centuryThreshold", "yearShift", "itemsDelta", "timeInputFormat", "timeDisplayFormat"],
+    outputs: ["rendering", "rendered", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "blur", "focus", "keydown", "keypress", "keyup", "valueChanging", "valueChanged", "dropDownListOpening", "dropDownListOpened", "dropDownListClosing", "dropDownListClosed", "dropDownItemSelecting", "dropDownItemSelected", "textChanged"]
+})
+export class IgTimePickerComponent extends IgEditorBase<IgTimePicker> {
+    constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, kvalDiffers: KeyValueDiffers, cdr: ChangeDetectorRef, @Optional() public model: NgModel) { super(el, renderer, differs, kvalDiffers, cdr, model); }
+    /**
+     * Gets the selected list item.
+     */
+    public getSelectedListItem(): string { return; };
+
+    /**
+     * Returns the visibility state of the calendar.
+     */
+    public dropDownVisible(): boolean { return; };
+
+    /**
+     * Returns a reference to the drop-down button UI element of the editor.
+     */
+    public dropDownButton(): string { return; };
+
+    /**
+     * Gets reference to jquery object which is used as container of drop-down list.
+     */
+    public dropDownContainer(): string { return; };
+
+    /**
+     * Finds index of list item by text that matches with the search parameters.
+     *
+     * @param text The text to search for in the drop down list.
+     * @param matchType The rule that is applied for searching the text.
+     */
+    public findListItemIndex(text: string, matchType?: Object): number { return; };
+
+    /**
+     * Gets the index of the selected list item. Sets selected item by index.
+     *
+     * @param index The index of the item that needs to be selected.
+     */
+    public selectedListIndex(index?: number): number { return; };
+    public value(newValue: Object): void { return; };
+    public selectDate(): void { return; };
+
+    /**
+     * Changes the the regional settings of widget element to the language specified in [options.regional](ui.igdateeditor#options:regional)
+     * Note that this method is for rare scenarios, use [regional](ui.igdateeditor#options:regional) option setter
+     */
+    public changeRegional(): void { return; };
+
+    /**
+     * Gets selected date as a date object. This method can be used when dataMode is set as either displayModeText or editModeText.
+     * In such cases the value() method will not return date object and getSelectedDate() can be used to replace that functionality.
+     */
+    public getSelectedDate(): Date { return; };
+
+    /**
+     * Increases the date or time period, depending on the current cursor position.
+     *
+     * @param delta The increase delta.
+     */
+    public spinUp(delta?: number): void { return; };
+
+    /**
+     * Decreases the date or time period, depending on the current cursor position.
+     *
+     * @param delta The decrease delta.
+     */
+    public spinDown(delta?: number): void { return; };
+
+    /**
+     * Returns a reference to the spin up UI element of the editor.
+     */
+    public spinUpButton(): string { return; };
+
+    /**
+     * Returns a reference to the spin down UI element of the editor.
+     */
+    public spinDownButton(): string { return; };
+
+    /**
+     * Checks if the value in the editor is valid. Note: This function will not trigger automatic notifications.
+     */
+    public isValid(): boolean { return; };
+}

src/igniteui.angular2.ts

@@ -26,6 +26,7 @@ import { IgCheckboxEditorComponent } from './igeditors/igcheckboxeditor.componen
 import { IgCurrencyEditorComponent } from './igeditors/igcurrencyeditor.component';
 import { IgDateEditorComponent } from './igeditors/igdateeditor.component';
 import { IgDatePickerComponent } from './igeditors/igdatepicker.component';
+import { IgTimePickerComponent } from './igeditors/igtimepicker.component';
 import { IgMaskEditorComponent } from './igeditors/igmaskeditor.component';
 import { IgNumericEditorComponent } from './igeditors/ignumericeditor.component';
 import { IgPercentEditorComponent } from './igeditors/igpercenteditor.component';
@@ -87,6 +88,7 @@ export { IgCheckboxEditorComponent };
 export { IgCurrencyEditorComponent };
 export { IgDateEditorComponent };
 export { IgDatePickerComponent };
+export { IgTimePickerComponent };
 export { IgMaskEditorComponent };
 export { IgNumericEditorComponent };
 export { IgPercentEditorComponent };
@@ -122,7 +124,7 @@ export { IgSpreadsheetComponent };
 export { IgSchedulerComponent };
 
 @NgModule({
-	declarations: [Column,IgGridMultiColumnHeadersFeature,IgGridSortingFeature,IgGridFilteringFeature,IgGridPagingFeature,IgGridUpdatingFeature,IgGridGroupByFeature,IgGridColumnMovingFeature,IgGridHidingFeature,IgGridCellMergingFeature,IgGridResponsiveFeature,IgGridResizingFeature,IgGridSelectionFeature,IgGridRowSelectorsFeature,IgGridSummariesFeature,IgGridColumnFixingFeature,IgGridTooltipsFeature,IgGridAppendRowsOnDemandFeature,Features,IgGridComponent,IgTreeGridComponent,IgHierarchicalGridComponent,IgComboComponent,IgCheckboxEditorComponent,IgCurrencyEditorComponent,IgDateEditorComponent,IgDatePickerComponent,IgMaskEditorComponent,IgNumericEditorComponent,IgPercentEditorComponent,IgTextEditorComponent,IgTreeComponent,IgDialogComponent,IgSplitterComponent,IgLayoutManagerComponent,IgTileManagerComponent,IgHtmlEditorComponent,IgValidatorComponent,IgPivotDataSelectorComponent,IgPivotGridComponent,IgDataChartComponent,IgPieChartComponent,IgDoughnutChartComponent,IgFunnelChartComponent,IgRadialGaugeComponent,IgZoombarComponent,IgMapComponent,IgSparklineComponent,IgBulletGraphComponent,IgLinearGaugeComponent,IgQRCodeBarcodeComponent,IgUploadComponent,IgPopoverComponent,IgNotifierComponent,IgRatingComponent,IgVideoPlayerComponent,IgRadialMenuComponent,IgSplitButtonComponent, IgSpreadsheetComponent, IgSchedulerComponent],
-	exports: [Column, IgGridMultiColumnHeadersFeature, IgGridSortingFeature,IgGridFilteringFeature,IgGridPagingFeature,IgGridUpdatingFeature,IgGridGroupByFeature,IgGridColumnMovingFeature,IgGridHidingFeature,IgGridCellMergingFeature,IgGridResponsiveFeature,IgGridResizingFeature,IgGridSelectionFeature,IgGridRowSelectorsFeature,IgGridSummariesFeature,IgGridColumnFixingFeature,IgGridTooltipsFeature,IgGridAppendRowsOnDemandFeature,Features,IgGridComponent,IgTreeGridComponent,IgHierarchicalGridComponent,IgComboComponent,IgCheckboxEditorComponent,IgCurrencyEditorComponent,IgDateEditorComponent,IgDatePickerComponent,IgMaskEditorComponent,IgNumericEditorComponent,IgPercentEditorComponent,IgTextEditorComponent,IgTreeComponent,IgDialogComponent,IgSplitterComponent,IgLayoutManagerComponent,IgTileManagerComponent,IgHtmlEditorComponent,IgValidatorComponent,IgPivotDataSelectorComponent,IgPivotGridComponent,IgDataChartComponent,IgPieChartComponent,IgDoughnutChartComponent,IgFunnelChartComponent,IgRadialGaugeComponent,IgZoombarComponent,IgMapComponent,IgSparklineComponent,IgBulletGraphComponent,IgLinearGaugeComponent,IgQRCodeBarcodeComponent,IgUploadComponent,IgPopoverComponent,IgNotifierComponent,IgRatingComponent,IgVideoPlayerComponent,IgRadialMenuComponent,IgSplitButtonComponent, IgSpreadsheetComponent, IgSchedulerComponent]
+	declarations: [Column,IgGridMultiColumnHeadersFeature,IgGridSortingFeature,IgGridFilteringFeature,IgGridPagingFeature,IgGridUpdatingFeature,IgGridGroupByFeature,IgGridColumnMovingFeature,IgGridHidingFeature,IgGridCellMergingFeature,IgGridResponsiveFeature,IgGridResizingFeature,IgGridSelectionFeature,IgGridRowSelectorsFeature,IgGridSummariesFeature,IgGridColumnFixingFeature,IgGridTooltipsFeature,IgGridAppendRowsOnDemandFeature,Features,IgGridComponent,IgTreeGridComponent,IgHierarchicalGridComponent,IgComboComponent,IgCheckboxEditorComponent,IgCurrencyEditorComponent,IgDateEditorComponent,IgDatePickerComponent,IgDatePickerComponent,IgMaskEditorComponent,IgNumericEditorComponent,IgPercentEditorComponent,IgTextEditorComponent,IgTreeComponent,IgDialogComponent,IgSplitterComponent,IgLayoutManagerComponent,IgTileManagerComponent,IgHtmlEditorComponent,IgValidatorComponent,IgPivotDataSelectorComponent,IgPivotGridComponent,IgDataChartComponent,IgPieChartComponent,IgDoughnutChartComponent,IgFunnelChartComponent,IgRadialGaugeComponent,IgZoombarComponent,IgMapComponent,IgSparklineComponent,IgBulletGraphComponent,IgLinearGaugeComponent,IgQRCodeBarcodeComponent,IgUploadComponent,IgPopoverComponent,IgNotifierComponent,IgRatingComponent,IgVideoPlayerComponent,IgRadialMenuComponent,IgSplitButtonComponent, IgSpreadsheetComponent, IgSchedulerComponent],
+	exports: [Column, IgGridMultiColumnHeadersFeature, IgGridSortingFeature,IgGridFilteringFeature,IgGridPagingFeature,IgGridUpdatingFeature,IgGridGroupByFeature,IgGridColumnMovingFeature,IgGridHidingFeature,IgGridCellMergingFeature,IgGridResponsiveFeature,IgGridResizingFeature,IgGridSelectionFeature,IgGridRowSelectorsFeature,IgGridSummariesFeature,IgGridColumnFixingFeature,IgGridTooltipsFeature,IgGridAppendRowsOnDemandFeature,Features,IgGridComponent,IgTreeGridComponent,IgHierarchicalGridComponent,IgComboComponent,IgCheckboxEditorComponent,IgCurrencyEditorComponent,IgDateEditorComponent,IgDatePickerComponent,IgDatePickerComponent,IgMaskEditorComponent,IgNumericEditorComponent,IgPercentEditorComponent,IgTextEditorComponent,IgTreeComponent,IgDialogComponent,IgSplitterComponent,IgLayoutManagerComponent,IgTileManagerComponent,IgHtmlEditorComponent,IgValidatorComponent,IgPivotDataSelectorComponent,IgPivotGridComponent,IgDataChartComponent,IgPieChartComponent,IgDoughnutChartComponent,IgFunnelChartComponent,IgRadialGaugeComponent,IgZoombarComponent,IgMapComponent,IgSparklineComponent,IgBulletGraphComponent,IgLinearGaugeComponent,IgQRCodeBarcodeComponent,IgUploadComponent,IgPopoverComponent,IgNotifierComponent,IgRatingComponent,IgVideoPlayerComponent,IgRadialMenuComponent,IgSplitButtonComponent, IgSpreadsheetComponent, IgSchedulerComponent]
 })
 export class IgniteUIModule {}

tests/unit/igeditors/editors.spec.ts

@@ -491,7 +491,59 @@ export function main() {
 				}, 1);
 			});
 		});
-	});
+    });
+
+    describe('Infragistics Angular2 TimePicker', () => {
+		beforeEach(() => {
+			TestBed.configureTestingModule({
+				imports: [FormsModule],
+				declarations: [Infragistics.IgTimePickerComponent, TestIgTimePickerComponent]
+			});
+		});
+
+		it('should initialize correctly', (done) => {
+			var template = '<div><ig-time-picker></ig-time-picker></div>';
+			TestBed.overrideComponent(TestIgTimePickerComponent, {
+				set: {
+					template: template
+				}
+			});
+			TestBed.compileComponents().then(() => {
+				let fixture = TestBed.createComponent(TestIgTimePickerComponent);
+				fixture.detectChanges();
+				expect(fixture.debugElement.componentInstance.viewChild instanceof Infragistics.IgTimePickerComponent)
+					.toBe(true);
+				done();
+			});
+		});
+
+		it('should allow setting value with ngModel', (done) => {
+			var template = '<div><ig-time-picker [(ngModel)]="val" [widgetId]="editorId" [options]="{isLimitedToListValues:false}"></ig-time-picker></div>';
+			TestBed.overrideComponent(TestIgTimePickerComponent, {
+				set: {
+					template: template
+				}
+			});
+			TestBed.compileComponents().then(() => {
+				let fixture = TestBed.createComponent(TestIgTimePickerComponent);
+				fixture.detectChanges();
+				setTimeout(() => {
+					expect($(fixture.debugElement.nativeElement).find("#editor1").igTimePicker("displayValue")).toBe("12:36 AM");
+					fixture.debugElement.componentInstance.val = "05:50 AM";
+					fixture.detectChanges();
+					setTimeout(() => {
+						expect($(fixture.debugElement.nativeElement).find("#editor1").igTimePicker("displayValue")).toBe("5:50 AM");
+						$(fixture.debugElement.nativeElement).find("#editor1").focus().trigger("focus").val("06:00 PM").blur().trigger("blur");
+						setTimeout(() => {
+							expect(fixture.debugElement.componentInstance.val.getHours()).toBe(6);
+							expect(fixture.debugElement.componentInstance.val.getMinutes()).toBe(0);
+							done();
+						}, 100);
+					}, 1);
+				}, 1);
+			});
+		});
+    });
 }
 
 @Component({
@@ -575,6 +627,21 @@ class TestIgDatePickerComponent {
 	}
 }
 
+@Component({
+	selector: 'test-time-picker-cmp',
+	template: '<div></div>' //"Component 'TestComponent' must have either 'template' or 'templateUrl' set."
+})
+class TestIgTimePickerComponent {
+	private val: string;
+	private editorId:string;
+	@ViewChild(Infragistics.IgTimePickerComponent) public viewChild: Infragistics.IgTimePickerComponent;
+
+	constructor() {
+		this.val = "12:36 AM";
+		this.editorId = "editor1";
+	}
+}
+
 @Component({
 	selector: 'test-date-editor-cmp',
 	template: '<div></div>' //"Component 'TestComponent' must have either 'template' or 'templateUrl' set."