+
-
+
diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
index 8cd9910..6a1761f 100644
--- a/apps/demo/src/app/app.component.ts
+++ b/apps/demo/src/app/app.component.ts
@@ -85,6 +85,45 @@ export class AppComponent {
{ key: 'G', text: 'Option g' },
];
+ allowFreeform = true;
+ useHour12 = true;
+ timePickerStyles = {
+ optionsContainerWrapper: {
+ height: '500px',
+ },
+ root: {
+ width: '50%',
+ },
+ }
+
+ onFormatDate(date) {
+ console.log(date)
+ }
+
+ handleTimePickerChange($event) {
+ console.log($event);
+ }
+
+ handleTimePickerItemClick($event) {
+ console.log($event)
+ }
+
+ handleTimePickerInputValueChange(v) {
+ console.log(v);
+ }
+
+ handleTimePickerMenuOpen() {
+ console.log('handleTimePickerMenuOpen')
+ }
+
+ handleTimePickerMenuDismissed() {
+ console.log('handleTimePickerMenuDismissed')
+ }
+
+ handleTimePickerMenuDismiss() {
+ console.log('handleTimePickerMenuDismiss')
+ }
+
// tslint:disable-next-line: member-ordering
textFieldValue = 'Hello';
diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts
index 62712e0..32ee1bb 100644
--- a/apps/demo/src/app/app.module.ts
+++ b/apps/demo/src/app/app.module.ts
@@ -41,6 +41,7 @@ import { FabTextFieldModule } from '@angular-react/fabric/lib/components/text-fi
import { FabPeoplePickerModule, FabTagPickerModule } from '@angular-react/fabric/lib/components/pickers';
import { FabProgressIndicatorModule } from '@angular-react/fabric/lib/components/progress-indicator';
import { FabRatingModule } from '@angular-react/fabric/lib/components/rating';
+import { FabTimePickerModule } from '@angular-react/fabric/lib/components/time-picker';
@NgModule({
imports: [
@@ -83,7 +84,8 @@ import { FabRatingModule } from '@angular-react/fabric/lib/components/rating';
FabPeoplePickerModule,
FabTagPickerModule,
FabProgressIndicatorModule,
- FabRatingModule
+ FabRatingModule,
+ FabTimePickerModule
],
declarations: [AppComponent, CounterComponent],
bootstrap: [AppComponent],
diff --git a/libs/fabric/lib/components/time-picker/ng-package.json b/libs/fabric/lib/components/time-picker/ng-package.json
new file mode 100644
index 0000000..789c95e
--- /dev/null
+++ b/libs/fabric/lib/components/time-picker/ng-package.json
@@ -0,0 +1,5 @@
+{
+ "lib": {
+ "entryFile": "public-api.ts"
+ }
+}
diff --git a/libs/fabric/lib/components/time-picker/public-api.ts b/libs/fabric/lib/components/time-picker/public-api.ts
new file mode 100644
index 0000000..14e7783
--- /dev/null
+++ b/libs/fabric/lib/components/time-picker/public-api.ts
@@ -0,0 +1,2 @@
+export * from './time-picker.component';
+export * from './time-picker.module';
diff --git a/libs/fabric/lib/components/time-picker/time-picker.component.ts b/libs/fabric/lib/components/time-picker/time-picker.component.ts
new file mode 100644
index 0000000..93daf91
--- /dev/null
+++ b/libs/fabric/lib/components/time-picker/time-picker.component.ts
@@ -0,0 +1,108 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent } from '@angular-react/core';
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ EventEmitter,
+ Input,
+ Output,
+ Renderer2,
+ ViewChild,
+} from '@angular/core';
+import type { ITimePickerProps } from '@fluentui/react/lib/TimePicker';
+import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
+import type { IComboBox, IComboBoxOption } from '@fluentui/react/lib/components/ComboBox';
+import { formatTimeString } from '@fluentui/date-time-utilities';
+
+@AngularReact()
+@Styled('FabTimePickerComponent')
+@Component({
+ selector: 'fab-time-picker',
+ exportAs: 'fabTimePicker',
+ template: `
+
+
+ `
+})
+export class FabTimePickerComponent extends ReactWrapperComponent {
+ @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
+
+ @Input() componentRef?: ITimePickerProps['componentRef'];
+ @Input() theme?: ITimePickerProps['theme'];
+ @Input() styles?: ITimePickerProps['styles'];
+ @Input() label?: ITimePickerProps['label'];
+ @Input() increments?: ITimePickerProps['increments'];
+ @Input() showSeconds?: ITimePickerProps['showSeconds'];
+ @Input() useHour12?: ITimePickerProps['useHour12'];
+ @Input() allowFreeform?: ITimePickerProps['allowFreeform'];
+ @Input() autoComplete?: ITimePickerProps['autoComplete'];
+ @Input() timeRange?: ITimePickerProps['timeRange'];
+ @Input() strings?: ITimePickerProps['strings'];
+ @Input() defaultValue?: ITimePickerProps['defaultValue'];
+ @Input() useComboBoxAsMenuWidth?: ITimePickerProps['useComboBoxAsMenuWidth'] = true;
+ @Input() onFormatDate?: ITimePickerProps['onFormatDate']
+ @Input() onValidateUserInput?: ITimePickerProps['onValidateUserInput']
+
+ @Output() readonly onChange = new EventEmitter<{event: React.FormEvent, option?: IComboBoxOption, index?: number, value?: string}>();
+ @Output() readonly onItemClick = new EventEmitter<{event: React.FormEvent, option?: IComboBoxOption, index?: number}>();
+ @Output() readonly onInputValueChange = new EventEmitter();
+ @Output() readonly onMenuOpen = new EventEmitter();
+ @Output() readonly onMenuDismissed = new EventEmitter();
+ @Output() readonly onMenuDismiss = new EventEmitter();
+
+ constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+ super(elementRef, changeDetectorRef, renderer);
+ }
+
+ handleChange = (event: React.FormEvent, option?: IComboBoxOption, index?: number, value?: string) => {
+ this.onChange.emit({ event, option, index, value })
+ }
+
+ handleItemClick = (event: React.FormEvent, option?: IComboBoxOption, index?: number) => {
+ this.onItemClick.emit({ event, option, index });
+ }
+
+ handleInputValueChange = (text: string) => {
+ this.onInputValueChange.emit(text);
+ }
+
+ handleMenuOpen = () => {
+ this.onMenuOpen.emit();
+ }
+
+ handleMenuDismissed = () => {
+ this.onMenuDismissed.emit();
+ }
+
+ handleMenuDismiss = () => {
+ this.onMenuDismiss.emit();
+ }
+}
\ No newline at end of file
diff --git a/libs/fabric/lib/components/time-picker/time-picker.module.ts b/libs/fabric/lib/components/time-picker/time-picker.module.ts
new file mode 100644
index 0000000..4a6a41d
--- /dev/null
+++ b/libs/fabric/lib/components/time-picker/time-picker.module.ts
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { registerElement } from '@angular-react/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { TimePicker } from '@fluentui/react/lib/TimePicker';
+// import * as CalendarCss from 'office-ui-fabric-react/lib-amd/components/Calendar/Calendar.scss';
+// import { noop } from '@angular-react/fabric/lib/utils';
+import { FabTimePickerComponent } from './time-picker.component';
+
+// Dummy action to force CalendarCss to load and not be tree-shaken away.
+// noop(CalendarCss);
+
+const components = [FabTimePickerComponent];
+
+@NgModule({
+ imports: [CommonModule],
+ declarations: components,
+ exports: components,
+ schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabTimePickerModule {
+ constructor() {
+ // Add any React elements to the registry (used by the renderer).
+ registerElement('TimePicker', () => TimePicker);
+ }
+}
diff --git a/libs/fabric/package.json b/libs/fabric/package.json
index ccb2977..80353c0 100644
--- a/libs/fabric/package.json
+++ b/libs/fabric/package.json
@@ -1,6 +1,6 @@
{
"name": "@angular-react/fabric",
- "version": "4.1.0",
+ "version": "4.2.0",
"description": "Use Fabric React components inside Angular",
"author": {
"name": "Ben Feely",