Added ChoiceGroup component

.vscode/settings.json

@@ -14,5 +14,6 @@
     "uifabric",
     "unmount",
     "whitelisted"
-  ]
-}
+  ],
+  "typescript.updateImportsOnFileMove.enabled": "never"
+}

apps/demo/src/app/app.component.html

@@ -97,4 +97,6 @@
     </p>
   </fab-callout> -->
 
+  <fab-choice-group [options]="choiceGroupOptions" label="Pick one" [required]="true"></fab-choice-group>
+
 </div>

apps/demo/src/app/app.component.ts

@@ -4,6 +4,7 @@ import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { ICommandBarItemProps } from 'office-ui-fabric-react/lib/CommandBar';
 import { DialogType } from 'office-ui-fabric-react/lib/Dialog';
 import { PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { IChoiceGroupProps } from '../../../../node_modules/office-ui-fabric-react/lib/components/ChoiceGroup/ChoiceGroup.types';
 
 @Component({
   selector: 'fab-panel-header',
@@ -155,6 +156,22 @@ export class AppComponent {
     { text: 'This is link 5', 'key': 'l5', href: '#/examples/breadcrumb', isCurrentItem: true },
   ]
 
+  choiceGroupOptions: IChoiceGroupProps['options'] = [
+    {
+      key: 'A',
+      text: 'Selected'
+    },
+    {
+      key: 'B',
+      text: 'Unselected',
+    },
+    {
+      key: 'C',
+      text: 'Disabled',
+      disabled: true
+    }
+  ];
+
   toggleDialog() {
     this.dialogHidden = !this.dialogHidden;
   }

apps/demo/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { AngularReactBrowserModule } from '@angular-react/core';
-import { FabBreadcrumbModule, FabButtonModule, FabCalloutModule, FabCheckboxModule, FabCommandBarModule, FabDialogModule, FabIconModule, FabImageModule, FabPanelModule } from '@angular-react/fabric';
+import { FabBreadcrumbModule, FabButtonModule, FabCalloutModule, FabCheckboxModule, FabChoiceGroupModule, FabCommandBarModule, FabDialogModule, FabIconModule, FabImageModule, FabPanelModule } from '@angular-react/fabric';
 import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
@@ -18,6 +18,7 @@ import { AppComponent, PanelBodyComponent } from './app.component';
     FabBreadcrumbModule,
     FabCalloutModule,
     FabCheckboxModule,
+    FabChoiceGroupModule,
   ],
   declarations: [AppComponent, PanelBodyComponent],
   bootstrap: [AppComponent],

libs/fabric/public-api.ts

@@ -2,6 +2,7 @@ export * from './src/breadcrumb/public-api';
 export * from './src/button/public-api';
 export * from './src/callout/public-api';
 export * from './src/checkbox/public-api';
+export * from './src/choice-group/public-api';
 export * from './src/command-bar/public-api';
 export * from './src/dialog/public-api';
 export * from './src/icon/public-api';

libs/fabric/src/choice-group/choice-group.component.ts

@@ -0,0 +1,73 @@
+// tslint:disable:component-selector
+// tslint:disable:no-input-rename
+// tslint:disable:no-output-rename
+// tslint:disable:use-host-property-decorator
+// tslint:disable:no-output-on-prefix
+
+import { ReactWrapperComponent } from '@angular-react/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/lib/components/ChoiceGroup';
+
+@Component({
+  selector: 'fab-choice-group',
+  exportAs: 'fabChoiceGroup',
+  template: `
+    <ChoiceGroup
+      #reactNode
+      [componentRef]="componentRef"
+      [options]="options"
+      [defaultSelectedKey]="defaultSelectedKey"
+      [selectedKey]="selectedKey"
+      [label]="label"
+      [required]="required"
+      [theme]="theme"
+      [styles]="styles"
+      [Changed]="onChangedHandler"
+      [Change]="onChangeHandler"
+      >
+    </ChoiceGroup>
+  `,
+  styles: [
+    'react-renderer',
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 'class': 'fab-choice-group' }
+})
+export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps>  {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  @Input() componentRef?: IChoiceGroupProps['componentRef'];
+  @Input() options?: IChoiceGroupProps['options'];
+  @Input() defaultSelectedKey?: IChoiceGroupProps['defaultSelectedKey'];
+  @Input() selectedKey?: IChoiceGroupProps['selectedKey'];
+  @Input() label?: IChoiceGroupProps['label'];
+  @Input() theme?: IChoiceGroupProps['theme'];
+  @Input() styles?: IChoiceGroupProps['styles'];
+
+  /** HTML Input props */
+  @Input() required?: IChoiceGroupProps['required'];
+
+  @Output() readonly onChanged = new EventEmitter<{ option: IChoiceGroupOption, evt?: Event }>();
+  @Output() readonly onChange = new EventEmitter<{ ev?: Event, option?: IChoiceGroupOption }>();
+
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
+
+    this.onChangedHandler = this.onChangedHandler.bind(this);
+    this.onChangeHandler = this.onChangeHandler.bind(this);
+  }
+
+  onChangedHandler(option: IChoiceGroupOption, evt?: React.FormEvent<HTMLElement | HTMLInputElement>) {
+    this.onChanged.emit({
+      option,
+      evt: evt && evt.nativeEvent,
+    });
+  }
+
+  onChangeHandler(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) {
+    this.onChange.emit({
+      ev: ev && ev.nativeEvent,
+      option,
+    });
+  }
+}

libs/fabric/src/choice-group/choice-group.module.ts

@@ -0,0 +1,24 @@
+import { registerElement } from '@angular-react/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
+import { FabChoiceGroupComponent } from './choice-group.component';
+
+const components = [
+  FabChoiceGroupComponent,
+];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA]
+})
+export class FabChoiceGroupModule {
+
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('ChoiceGroup', () => ChoiceGroup);
+  }
+
+}

libs/fabric/src/choice-group/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

libs/fabric/src/choice-group/public-api.ts

@@ -0,0 +1,2 @@
+export * from './choice-group.component';
+export * from './choice-group.module';