prettier formatting

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "printWidth": 120
-}
+  "printWidth": 120,
+  "trailingComma": "es5"
+}

libs/core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-react/core",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

libs/core/public-api.ts

@@ -3,4 +3,4 @@ export * from './src/components/wrapper-component';
 export { ReactContent } from './src/renderer/react-content';
 export { registerElement } from './src/renderer/registry';
 export { passProp, getPassProps, PassProp } from './src/renderer/pass-prop-decorator';
-export * from './src/renderer/components/Disguise'
+export * from './src/renderer/components/Disguise';

libs/core/src/components/wrapper-component.ts

@@ -1,7 +1,20 @@
-import { AfterViewInit, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, TemplateRef, Type, ChangeDetectorRef, OnChanges, SimpleChanges, HostBinding, Input } from "@angular/core";
-import { isReactNode } from "../renderer/react-node";
-import { renderComponent, renderFunc, renderTemplate } from "../renderer/renderprop-helpers";
-import { unreachable } from "../utils/types/unreachable";
+import {
+  AfterViewInit,
+  ComponentFactoryResolver,
+  ComponentRef,
+  ElementRef,
+  Injector,
+  TemplateRef,
+  Type,
+  ChangeDetectorRef,
+  OnChanges,
+  SimpleChanges,
+  HostBinding,
+  Input
+} from '@angular/core';
+import { isReactNode } from '../renderer/react-node';
+import { renderComponent, renderFunc, renderTemplate } from '../renderer/renderprop-helpers';
+import { unreachable } from '../utils/types/unreachable';
 import toStyle from 'css-to-style';
 
 type PropMapper = (value: any) => [string, any];
@@ -14,9 +27,7 @@ const forbiddenAttributesAsProps: ReadonlyArray<AttributeNameAlternative> = [
   ['style', 'rStyle'],
 ];
 
-const ignoredAttributeMatchers = [
-  /^_?ng-?.*/
-];
+const ignoredAttributeMatchers = [/^_?ng-?.*/];
 
 const ngClassRegExp = /^ng-/;
 
@@ -27,7 +38,7 @@ export interface RenderComponentOptions<TContext extends object> {
 }
 
 export type InputRendererOptions<TContext extends object> =
-  TemplateRef<TContext>
+  | TemplateRef<TContext>
   | ((context: TContext) => HTMLElement)
   | ComponentRef<TContext>
   | RenderComponentOptions<TContext>;
@@ -40,17 +51,18 @@ export type JsxRenderFunc<TContext> = (context: TContext) => JSX.Element;
  */
 // NOTE: TProps is not used at the moment, but a preparation for a potential future change.
 export abstract class ReactWrapperComponent<TProps extends {}> implements AfterViewInit, OnChanges {
-
   protected abstract reactNodeRef: ElementRef;
 
-  @Input() set rClass(value: string) {
+  @Input()
+  set rClass(value: string) {
     if (isReactNode(this.reactNodeRef.nativeElement)) {
       this.reactNodeRef.nativeElement.setProperty('className', value);
       this.changeDetectorRef.detectChanges();
     }
   }
 
-  @Input() set rStyle(value: string) {
+  @Input()
+  set rStyle(value: string) {
     if (isReactNode(this.reactNodeRef.nativeElement)) {
       this.reactNodeRef.nativeElement.setProperty('style', toStyle(value));
       this.changeDetectorRef.detectChanges();
@@ -62,7 +74,11 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
    * @param elementRef The host element.
    * @param setHostDisplay Whether the host's `display` should be set to the root child node's `display`. defaults to `false`
    */
-  constructor(public readonly elementRef: ElementRef, private readonly changeDetectorRef: ChangeDetectorRef, private readonly setHostDisplay: boolean = false) { }
+  constructor(
+    public readonly elementRef: ElementRef,
+    private readonly changeDetectorRef: ChangeDetectorRef,
+    private readonly setHostDisplay: boolean = false
+  ) { }
 
   ngAfterViewInit() {
     this._passAttributesAsProps();
@@ -90,7 +106,9 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
    * Create an JSX renderer for an `@Input` property.
    * @param input The input property
    */
-  protected createInputJsxRenderer<TContext extends object>(input: InputRendererOptions<TContext>): JsxRenderFunc<TContext> | undefined {
+  protected createInputJsxRenderer<TContext extends object>(
+    input: InputRendererOptions<TContext>
+  ): JsxRenderFunc<TContext> | undefined {
     if (input === undefined) {
       return undefined;
     }
@@ -107,7 +125,7 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
       return (context: TContext) => renderFunc(input, context);
     }
 
-    if (typeof input === "object") {
+    if (typeof input === 'object') {
       const { componentType, factoryResolver, injector } = input;
       const componentFactory = factoryResolver.resolveComponentFactory(componentType);
       const componentRef = componentFactory.create(injector);
@@ -123,7 +141,10 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
    * @param renderInputValue the value of the render `@Input` property.
    * @param jsxRenderer an optional renderer to use.
    */
-  protected createRenderPropHandler<TProps extends object>(renderInputValue: InputRendererOptions<TProps>, jsxRenderer?: JsxRenderFunc<TProps>): (props?: TProps, defaultRender?: JsxRenderFunc<TProps>) => JSX.Element | null {
+  protected createRenderPropHandler<TProps extends object>(
+    renderInputValue: InputRendererOptions<TProps>,
+    jsxRenderer?: JsxRenderFunc<TProps>
+  ): (props?: TProps, defaultRender?: JsxRenderFunc<TProps>) => JSX.Element | null {
     const renderer = jsxRenderer || this.createInputJsxRenderer(renderInputValue);
 
     return (props?: TProps, defaultRender?: JsxRenderFunc<TProps>) => {
@@ -136,9 +157,7 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
   }
 
   private _passAttributesAsProps() {
-    const hostAttributes = Array.from(
-      (this.elementRef.nativeElement as HTMLElement).attributes
-    );
+    const hostAttributes = Array.from((this.elementRef.nativeElement as HTMLElement).attributes);
 
     if (!this.reactNodeRef || !isReactNode(this.reactNodeRef.nativeElement)) {
       throw new Error('reactNodeRef must hold a reference to a ReactNode');
@@ -148,15 +167,23 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
     hostAttributes.forEach(attr => {
       const [forbidden, alternativeAttrName] = this._isForbiddenAttribute(attr);
       if (forbidden) {
-        throw new Error(`[${(this.elementRef.nativeElement as HTMLElement).tagName.toLowerCase()}] React wrapper components cannot have the '${attr.name}' attribute set. Use the following alternative: ${alternativeAttrName || ''}`);
+        throw new Error(
+          `[${(this.elementRef
+            .nativeElement as HTMLElement).tagName.toLowerCase()}] React wrapper components cannot have the '${
+          attr.name
+          }' attribute set. Use the following alternative: ${alternativeAttrName || ''}`
+        );
       }
     });
 
     const whitelistedHostAttributes = hostAttributes.filter(attr => !this._isIgnoredAttribute(attr));
-    const props = whitelistedHostAttributes.reduce((acc, attr) => ({
-      ...acc,
-      [attr.name]: attr.value,
-    }), {});
+    const props = whitelistedHostAttributes.reduce(
+      (acc, attr) => ({
+        ...acc,
+        [attr.name]: attr.value,
+      }),
+      {}
+    );
 
     this.reactNodeRef.nativeElement.setProperties(props);
   }

libs/core/src/utils/object/remove-undefined-properties.ts

@@ -3,7 +3,7 @@ const clearUndefinedProperties = <T extends object>(obj: T): Partial<T> => {
     const _acc = acc;
     if (obj[key] !== undefined) _acc[key] = obj[key];
     return _acc;
-  }, {})
-}
+  }, {});
+};
 
 export default clearUndefinedProperties;

libs/fabric/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-react/fabric",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

libs/fabric/package.json

@@ -62,7 +62,7 @@
   ],
   "private": false,
   "peerDependencies": {
-    "@angular-react/core": "^0.2.0",
+    "@angular-react/core": "^0.2.1",
     "@angular/common": "^5.2.7",
     "@angular/core": "^5.2.7",
     "@angular/platform-browser-dynamic": "^5.2.7",

libs/fabric/src/components/breadcrumb/breadcrumb.component.ts

@@ -1,5 +1,13 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Breadcrumb';
 
 @Component({
@@ -24,7 +32,7 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br
     </Breadcrumb>
   `,
   styles: ['react-renderer'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;

libs/fabric/src/components/breadcrumb/breadcrumb.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Breadcrumb } from 'office-ui-fabric-react/lib/Breadcrumb';
 import { FabBreadcrumbComponent } from './breadcrumb.component';
 
-const components = [
-  FabBreadcrumbComponent,
-];
+const components = [FabBreadcrumbComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabBreadcrumbModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Breadcrumb', () => Breadcrumb);
   }
-
 }

libs/fabric/src/components/button/action-button.component.ts

@@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabActionButtonComponent extends FabBaseButtonComponent {
-
   @ViewChild('reactNode') reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/button/base-button.component.ts

@@ -4,7 +4,6 @@ import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
 
 export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps> implements OnInit {
-
   @Input() componentRef?: IButtonProps['componentRef'];
   @Input() href?: IButtonProps['href'];
   @Input() primary?: IButtonProps['primary'];
@@ -42,7 +41,7 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
   @Input() renderMenu?: InputRendererOptions<IContextualMenuProps>;
 
   @Output() readonly onClick = new EventEmitter<MouseEvent>();
-  @Output() readonly onMenuClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent, button?: IButtonProps }>();
+  @Output() readonly onMenuClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; button?: IButtonProps }>();
   @Output() readonly onAfterMenuDismiss = new EventEmitter<void>();
 
   onRenderIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
@@ -74,11 +73,10 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
     this.onMenuClick.emit({
       ev: ev && ev.nativeEvent,
       button,
-    })
+    });
   }
 
   onClickHandler(ev?: React.MouseEvent) {
     this.onClick.emit(ev.nativeEvent);
   }
-
 }

libs/fabric/src/components/button/button.module.ts

@@ -1,7 +1,15 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ActionButton, CommandBarButton, CompoundButton, DefaultButton, IconButton, MessageBarButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+import {
+  ActionButton,
+  CommandBarButton,
+  CompoundButton,
+  DefaultButton,
+  IconButton,
+  MessageBarButton,
+  PrimaryButton,
+} from 'office-ui-fabric-react/lib/Button';
 import { FabActionButtonComponent } from './action-button.component';
 import { FabCommandBarButtonComponent } from './command-bar-button.component';
 import { FabCompoundButtonComponent } from './compound-button.component';
@@ -26,10 +34,9 @@ const components = [
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabButtonModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('DefaultButton', () => DefaultButton);
@@ -40,5 +47,4 @@ export class FabButtonModule {
     registerElement('MessageBarButton', () => MessageBarButton);
     registerElement('PrimaryButton', () => PrimaryButton);
   }
-
 }

libs/fabric/src/components/button/command-bar-button.component.ts

@@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCommandBarButtonComponent extends FabBaseButtonComponent {
-
   @ViewChild('reactNode') reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/button/compound-button.component.ts

@@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCompoundButtonComponent extends FabBaseButtonComponent {
-
   @ViewChild('reactNode') reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/button/default-button.component.ts

@@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDefaultButtonComponent extends FabBaseButtonComponent {
-
   @ViewChild('reactNode') reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/button/icon-button.component.ts

@@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabIconButtonComponent extends FabBaseButtonComponent {
-
   @ViewChild('reactNode') reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/button/messagebar-button.component.ts

@@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMessageBarButtonComponent extends FabBaseButtonComponent {
-
   @ViewChild('reactNode') reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/button/primary-button.component.ts

@@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPrimaryButtonComponent extends FabBaseButtonComponent {
-
   @ViewChild('reactNode') reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/button/split-button.component.ts

@@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSplitButtonComponent extends FabBaseButtonComponent {
-
   @ViewChild('reactNode') reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/callout/callout.component.ts

@@ -1,5 +1,14 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout';
 import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/positioning/positioning.types';
 
@@ -85,5 +94,4 @@ export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/callout/callout.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Callout } from 'office-ui-fabric-react/lib/Callout';
 import { FabCalloutComponent } from './callout.component';
 
-const components = [
-  FabCalloutComponent,
-];
+const components = [FabCalloutComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabCalloutModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Callout', () => Callout);
   }
-
 }

libs/fabric/src/components/checkbox/checkbox.component.ts

@@ -1,5 +1,15 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ICheckboxProps } from 'office-ui-fabric-react/lib/Checkbox';
 import { FormEvent } from 'react';
 
@@ -56,7 +66,7 @@ export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps>
 
   @Input() renderLabel?: InputRendererOptions<ICheckboxProps>;
 
-  @Output() readonly onChange = new EventEmitter<{ ev?: Event, checked?: boolean }>();
+  @Output() readonly onChange = new EventEmitter<{ ev?: Event; checked?: boolean }>();
 
   /* Non-React props, more native support for Angular */
   // support for two-way data binding for `@Input() checked`.

libs/fabric/src/components/checkbox/checkbox.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { FabCheckboxComponent } from './checkbox.component';
 
-const components = [
-  FabCheckboxComponent,
-];
+const components = [FabCheckboxComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabCheckboxModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Checkbox', () => Checkbox);
   }
-
 }

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

@@ -1,5 +1,14 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/lib/ChoiceGroup';
 
 @Component({
@@ -24,7 +33,7 @@ import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/li
   styles: ['react-renderer'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps>  {
+export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps> {
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @Input() componentRef?: IChoiceGroupProps['componentRef'];
@@ -38,8 +47,8 @@ export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupP
   /** 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 }>();
+  @Output() readonly onChanged = new EventEmitter<{ option: IChoiceGroupOption; evt?: Event }>();
+  @Output() readonly onChange = new EventEmitter<{ ev?: Event; option?: IChoiceGroupOption }>();
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);

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

@@ -4,21 +4,17 @@ 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,
-];
+const components = [FabChoiceGroupComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  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/components/combo-box/base-combo-box.component.ts

@@ -24,8 +24,15 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
 
   @Input() renderLowerContent?: InputRendererOptions<IComboBoxProps>;
 
-  @Output() readonly onChanged = new EventEmitter<{ option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any }>();
-  @Output() readonly onPendingValueChanged = new EventEmitter<{ option?: IComboBoxOption, index?: number, value?: string }>();
+  @Output()
+  readonly onChanged = new EventEmitter<{
+    option?: IComboBoxOption;
+    index?: number;
+    value?: string;
+    submitPendingValueEvent?: any;
+  }>();
+  @Output()
+  readonly onPendingValueChanged = new EventEmitter<{ option?: IComboBoxOption; index?: number; value?: string }>();
   @Output() readonly onMenuOpen = new EventEmitter<void>();
   @Output() readonly onMenuDismissed = new EventEmitter<void>();
   @Output() readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>();
@@ -64,7 +71,7 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
 
   onScrollToItemHandler(itemIndex: number) {
     this.onScrollToItem.emit({
-      itemIndex
+      itemIndex,
     });
   }
 }

libs/fabric/src/components/combo-box/combo-box.module.ts

@@ -5,23 +5,18 @@ import { ComboBox, VirtualizedComboBox } from 'office-ui-fabric-react/lib/ComboB
 import { FabComboBoxComponent } from './combo-box.component';
 import { FabVirtualizedComboBoxComponent } from './virtualized-combo-box.component';
 
-const components = [
-  FabComboBoxComponent,
-  FabVirtualizedComboBoxComponent,
-];
+const components = [FabComboBoxComponent, FabVirtualizedComboBoxComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabComboBoxModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('ComboBox', () => ComboBox);
     registerElement('VirtualizedComboBox', () => VirtualizedComboBox);
   }
-
 }

libs/fabric/src/components/command-bar/command-bar.component.ts

@@ -1,8 +1,19 @@
 import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef, SimpleChanges, OnChanges } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+  SimpleChanges,
+  OnChanges,
+} from '@angular/core';
 import { ICommandBarItemProps, ICommandBarProps } from 'office-ui-fabric-react/lib/CommandBar';
 import { IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu';
-import omit from "../../utils/omit";
+import omit from '../../utils/omit';
 
 @Component({
   selector: 'fab-command-bar',
@@ -33,7 +44,6 @@ import omit from "../../utils/omit";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps> implements OnChanges {
-
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @Input() componentRef?: ICommandBarProps['componentRef'];
@@ -68,9 +78,24 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['items'] && changes['items'].previousValue !== changes['items'].currentValue && changes['items'].currentValue) this._createTransformedItems(changes['items'].currentValue);
-    if (changes['farItems'] && changes['farItems'].previousValue !== changes['farItems'].currentValue && changes['farItems'].currentValue) this._createTransformedFarItems(changes['farItems'].currentValue);
-    if (changes['overflowItems'] && changes['overflowItems'].previousValue !== changes['overflowItems'].currentValue && changes['overflowItems'].currentValue) this._createTransformedOverflowItems(changes['overflowItems'].currentValue);
+    if (
+      changes['items'] &&
+      changes['items'].previousValue !== changes['items'].currentValue &&
+      changes['items'].currentValue
+    )
+      this._createTransformedItems(changes['items'].currentValue);
+    if (
+      changes['farItems'] &&
+      changes['farItems'].previousValue !== changes['farItems'].currentValue &&
+      changes['farItems'].currentValue
+    )
+      this._createTransformedFarItems(changes['farItems'].currentValue);
+    if (
+      changes['overflowItems'] &&
+      changes['overflowItems'].previousValue !== changes['overflowItems'].currentValue &&
+      changes['overflowItems'].currentValue
+    )
+      this._createTransformedOverflowItems(changes['overflowItems'].currentValue);
 
     super.ngOnChanges(changes);
   }
@@ -96,15 +121,57 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
     return Object.assign(
       {},
       sharedProperties,
-      iconRenderer && { onRenderIcon: (props) => iconRenderer({ contextualMenuItemProps: props }) } as Pick<ICommandBarItemProps, 'onRenderIcon'>,
-      renderer && { onRender: (item, dismissMenu) => renderer({ item, dismissMenu }) } as Pick<ICommandBarItemProps, 'onRender'>,
+      iconRenderer &&
+        ({ onRenderIcon: props => iconRenderer({ contextualMenuItemProps: props }) } as Pick<
+          ICommandBarItemProps,
+          'onRenderIcon'
+        >),
+      renderer &&
+        ({ onRender: (item, dismissMenu) => renderer({ item, dismissMenu }) } as Pick<ICommandBarItemProps, 'onRender'>)
     ) as ICommandBarItemProps;
   }
 }
 
-export interface ICommandBarItemOptions<TData = any> extends Pick<ICommandBarItemProps, 'iconOnly' | 'buttonStyles' | 'cacheKey' | 'renderedInOverflow' | 'componentRef' | 'key' | 'text' | 'secondaryText' | 'iconProps' | 'submenuIconProps' | 'disabled' | 'primaryDisabled' | 'shortCut' | 'canCheck' | 'checked' | 'split' | 'data' | 'onClick' | 'href' | 'target' | 'rel' | 'subMenuProps' | 'getItemClassNames' | 'getSplitButtonVerticalDividerClassNames' | 'sectionProps' | 'className' | 'style' | 'ariaLabel' | 'title' | 'onMouseDown' | 'role' | 'customOnRenderListLength' | 'keytipProps' | 'inactive'> {
+export interface ICommandBarItemOptions<TData = any>
+  extends Pick<
+      ICommandBarItemProps,
+      | 'iconOnly'
+      | 'buttonStyles'
+      | 'cacheKey'
+      | 'renderedInOverflow'
+      | 'componentRef'
+      | 'key'
+      | 'text'
+      | 'secondaryText'
+      | 'iconProps'
+      | 'submenuIconProps'
+      | 'disabled'
+      | 'primaryDisabled'
+      | 'shortCut'
+      | 'canCheck'
+      | 'checked'
+      | 'split'
+      | 'data'
+      | 'onClick'
+      | 'href'
+      | 'target'
+      | 'rel'
+      | 'subMenuProps'
+      | 'getItemClassNames'
+      | 'getSplitButtonVerticalDividerClassNames'
+      | 'sectionProps'
+      | 'className'
+      | 'style'
+      | 'ariaLabel'
+      | 'title'
+      | 'onMouseDown'
+      | 'role'
+      | 'customOnRenderListLength'
+      | 'keytipProps'
+      | 'inactive'
+    > {
   readonly [propertyName: string]: any;
   readonly renderIcon?: InputRendererOptions<{ contextualMenuItemProps: IContextualMenuItemProps }>;
-  readonly render?: InputRendererOptions<{ item: any, dismissMenu: (ev?: any, dismissAll?: boolean) => void }>;
+  readonly render?: InputRendererOptions<{ item: any; dismissMenu: (ev?: any, dismissAll?: boolean) => void }>;
   readonly data?: TData;
 }

libs/fabric/src/components/command-bar/command-bar.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
 import { FabCommandBarComponent } from './command-bar.component';
 
-const components = [
-  FabCommandBarComponent,
-];
+const components = [FabCommandBarComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabCommandBarModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('CommandBar', () => CommandBar);
   }
-
 }

libs/fabric/src/components/date-picker/date-picker.component.ts

@@ -1,5 +1,14 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IDatePickerProps } from 'office-ui-fabric-react/lib/DatePicker';
 
 @Component({

libs/fabric/src/components/date-picker/date-picker.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { DatePicker } from 'office-ui-fabric-react/lib/DatePicker';
 import { FabDatePickerComponent } from './date-picker.component';
 
-const components = [
-  FabDatePickerComponent,
-];
+const components = [FabDatePickerComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabDatePickerModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('DatePicker', () => DatePicker);
   }
-
 }

libs/fabric/src/components/dialog/dialog.component.ts

@@ -1,5 +1,14 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui-fabric-react/lib/Dialog';
 
 @Component({
@@ -75,7 +84,6 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
   `,
   styles: ['react-renderer'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-
 })
 export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFooterProps> {
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
@@ -116,7 +124,6 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
   `,
   styles: ['react-renderer'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-
 })
 export class FabDialogContentComponent extends ReactWrapperComponent<IDialogContentProps> {
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;

libs/fabric/src/components/dialog/dialog.module.ts

@@ -4,25 +4,19 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Dialog, DialogContent, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
 import { FabDialogComponent, FabDialogContentComponent, FabDialogFooterComponent } from './dialog.component';
 
-const components = [
-  FabDialogComponent,
-  FabDialogContentComponent,
-  FabDialogFooterComponent,
-];
+const components = [FabDialogComponent, FabDialogContentComponent, FabDialogFooterComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabDialogModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Dialog', () => Dialog);
     registerElement('DialogContent', () => DialogContent);
     registerElement('DialogFooter', () => DialogFooter);
   }
-
 }

libs/fabric/src/components/divider/divider.component.ts

@@ -22,5 +22,4 @@ export class FabDividerComponent extends ReactWrapperComponent<IVerticalDividerP
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/divider/divider.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { VerticalDivider } from 'office-ui-fabric-react/lib/Divider';
 import { FabDividerComponent } from './divider.component';
 
-const components = [
-  FabDividerComponent,
-];
+const components = [FabDividerComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabDividerModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('VerticalDivider', () => VerticalDivider);
   }
-
 }

libs/fabric/src/components/fabric/fabric.component.ts

@@ -25,5 +25,4 @@ export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> {
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/fabric/fabric.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
 import { FabFabricComponent } from './fabric.component';
 
-const components = [
-  FabFabricComponent,
-];
+const components = [FabFabricComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabFabricModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Fabric', () => Fabric);
   }
-
 }

libs/fabric/src/components/grouped-list/grouped-list.component.ts

@@ -1,5 +1,15 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IGroupedListProps, IGroupRenderProps } from 'office-ui-fabric-react/lib/GroupedList';
 import { IListProps } from 'office-ui-fabric-react/lib/List';
 
@@ -81,5 +91,5 @@ export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListP
 export interface ICellRenderContext {
   readonly nestingDepth?: number;
   readonly item?: any;
-  readonly index?: number
+  readonly index?: number;
 }

libs/fabric/src/components/grouped-list/grouped-list.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { GroupedList } from 'office-ui-fabric-react/lib/GroupedList';
 import { FabGroupedListComponent } from './grouped-list.component';
 
-const components = [
-  FabGroupedListComponent,
-];
+const components = [FabGroupedListComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabGroupedListModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('GroupedList', () => GroupedList);
   }
-
 }

libs/fabric/src/components/hover-card/hover-card.component.ts

@@ -1,5 +1,14 @@
 import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
-import { EventEmitter, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, Output, ChangeDetectorRef } from '@angular/core';
+import {
+  EventEmitter,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+  Output,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IHoverCardProps, IExpandingCardProps } from 'office-ui-fabric-react/lib/HoverCard';
 import { omit } from '../../utils/omit';
 
@@ -45,7 +54,8 @@ export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps
   @Input() trapFocus?: IHoverCardProps['trapFocus'];
   @Input() shouldBlockHoverCard?: () => boolean; // Workaround for bug in the Fabric React types (() => void)
   @Input() setInitialFocus?: IHoverCardProps['setInitialFocus'];
-  @Input() set expandingCardOptions(value: IExpandingCardOptions) {
+  @Input()
+  set expandingCardOptions(value: IExpandingCardOptions) {
     this._expandingCardOptions = value;
     if (value) {
       this.transformedExpandingCardProps = this._transformExpandingCardOptionsToProps(value);
@@ -75,8 +85,16 @@ export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps
     return Object.assign(
       {},
       sharedProperties,
-      compactCardRenderer && { onRenderCompactCard: data => compactCardRenderer({ data }) } as Pick<IExpandingCardProps, 'onRenderCompactCard'>,
-      expandedCardRenderer && { onRenderExpandedCard: data => expandedCardRenderer({ data }) } as Pick<IExpandingCardProps, 'onRenderExpandedCard'>,
+      compactCardRenderer &&
+        ({ onRenderCompactCard: data => compactCardRenderer({ data }) } as Pick<
+          IExpandingCardProps,
+          'onRenderCompactCard'
+        >),
+      expandedCardRenderer &&
+        ({ onRenderExpandedCard: data => expandedCardRenderer({ data }) } as Pick<
+          IExpandingCardProps,
+          'onRenderExpandedCard'
+        >)
     );
   }
 }
@@ -84,7 +102,25 @@ export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps
 /**
  * Counterpart of `IExpandingCardProps`, with Angular adjustments.
  */
-export interface IExpandingCardOptions extends Pick<IExpandingCardProps, 'componentRef' | 'renderData' | 'targetElement' | 'onEnter' | 'onLeave' | 'compactCardHeight' | 'expandedCardHeight' | 'mode' | 'theme' | 'directionalHint' | 'gapSpace' | 'styles' | 'directionalHintFixed' | 'trapFocus' | 'firstFocus'> {
+export interface IExpandingCardOptions
+  extends Pick<
+      IExpandingCardProps,
+      | 'componentRef'
+      | 'renderData'
+      | 'targetElement'
+      | 'onEnter'
+      | 'onLeave'
+      | 'compactCardHeight'
+      | 'expandedCardHeight'
+      | 'mode'
+      | 'theme'
+      | 'directionalHint'
+      | 'gapSpace'
+      | 'styles'
+      | 'directionalHintFixed'
+      | 'trapFocus'
+      | 'firstFocus'
+    > {
   readonly renderCompactCard?: InputRendererOptions<RenderCardContext>;
   readonly renderExpandedCard?: InputRendererOptions<RenderCardContext>;
 }
@@ -92,4 +128,3 @@ export interface IExpandingCardOptions extends Pick<IExpandingCardProps, 'compon
 export interface RenderCardContext<T = any> {
   readonly data: T;
 }
-

libs/fabric/src/components/hover-card/hover-card.module.ts

@@ -13,14 +13,12 @@ const components = [
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabHoverCardModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('HoverCard', () => HoverCard);
     registerElement('ExpandingCard', () => ExpandingCard);
   }
-
 }

libs/fabric/src/components/icon/icon.component.ts

@@ -34,5 +34,4 @@ export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef, true);
   }
-
 }

libs/fabric/src/components/icon/icon.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { FabIconComponent } from './icon.component';
 
-const components = [
-  FabIconComponent,
-];
+const components = [FabIconComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabIconModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Icon', () => Icon);
   }
-
 }

libs/fabric/src/components/image/image.component.ts

@@ -1,5 +1,14 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IImageProps, ImageLoadState } from 'office-ui-fabric-react/lib/Image';
 
 @Component({
@@ -34,7 +43,6 @@ import { IImageProps, ImageLoadState } from 'office-ui-fabric-react/lib/Image';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabImageComponent extends ReactWrapperComponent<IImageProps> {
-
   @Input() alt?: IImageProps['alt'];
   @Input() crossOrigin?: IImageProps['crossOrigin'];
   @Input() height?: IImageProps['height'];
@@ -61,5 +69,4 @@ export class FabImageComponent extends ReactWrapperComponent<IImageProps> {
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/image/image.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Image } from 'office-ui-fabric-react/lib/Image';
 import { FabImageComponent } from './image.component';
 
-const components = [
-  FabImageComponent,
-];
+const components = [FabImageComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabImageModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Image', () => Image);
   }
-
 }

libs/fabric/src/components/link/link.component.ts

@@ -71,5 +71,4 @@ export class FabLinkComponent extends ReactWrapperComponent<ILinkProps> {
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/link/link.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { FabLinkComponent } from './link.component';
 
-const components = [
-  FabLinkComponent,
-];
+const components = [FabLinkComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabLinkModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Link', () => Link);
   }
-
 }

libs/fabric/src/components/message-bar/message-bar.component.ts

@@ -1,5 +1,15 @@
 import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  OnInit,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
 import { BaseButton, Button } from 'office-ui-fabric-react/lib/Button';
 
@@ -66,7 +76,6 @@ export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarPro
 
     return ev => {
       this.onDismiss.emit(ev && ev.nativeEvent);
-    }
+    };
   }
-
 }

libs/fabric/src/components/message-bar/message-bar.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
 import { FabMessageBarComponent } from './message-bar.component';
 
-const components = [
-  FabMessageBarComponent,
-];
+const components = [FabMessageBarComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabMessageBarModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('MessageBar', () => MessageBar);
   }
-
 }

libs/fabric/src/components/modal/modal.component.ts

@@ -1,5 +1,14 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, EventEmitter, ChangeDetectorRef, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+  EventEmitter,
+  ChangeDetectorRef,
+  Output,
+} from '@angular/core';
 import { IModalProps } from 'office-ui-fabric-react/lib/Modal';
 import { IAccessiblePopupProps } from 'office-ui-fabric-react/lib/common/IAccessiblePopupProps';
 import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';
@@ -37,7 +46,8 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
   styles: ['react-renderer'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FabModalComponent extends ReactWrapperComponent<IModalProps> implements IWithResponsiveModeState, IAccessiblePopupProps {
+export class FabModalComponent extends ReactWrapperComponent<IModalProps>
+  implements IWithResponsiveModeState, IAccessiblePopupProps {
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @Input() responsiveMode?: IModalProps['responsiveMode'];

libs/fabric/src/components/modal/modal.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Modal } from 'office-ui-fabric-react/lib/Modal';
 import { FabModalComponent } from './modal.component';
 
-const components = [
-  FabModalComponent,
-];
+const components = [FabModalComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabModalModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Modal', () => Modal);
   }
-
 }

libs/fabric/src/components/panel/panel.component.ts

@@ -1,5 +1,15 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Panel';
 
 @Component({
@@ -97,21 +107,23 @@ export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implem
     this.onRenderFooterContent = this.createRenderPropHandler(this.renderFooterContent);
   }
 
-  onRenderHeader(props?: IPanelProps, defaultRender?: IPanelHeaderRenderer, headerTextId?: string | undefined): JSX.Element {
+  onRenderHeader(
+    props?: IPanelProps,
+    defaultRender?: IPanelHeaderRenderer,
+    headerTextId?: string | undefined
+  ): JSX.Element {
     if (!this.renderHeader) {
       return typeof defaultRender === 'function' ? defaultRender(props, defaultRender, headerTextId) : null;
     }
 
     return this._renderHeader({ props, headerTextId });
   }
-
 }
 
 /**
  * Counterpart of `IPanelHeaderRenderer`.
  */
 export interface IPanelHeaderRenderContext {
-  readonly props?: IPanelProps
-  readonly headerTextId?: string | undefined
+  readonly props?: IPanelProps;
+  readonly headerTextId?: string | undefined;
 }
-

libs/fabric/src/components/panel/panel.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Panel } from 'office-ui-fabric-react/lib/Panel';
 import { FabPanelComponent } from './panel.component';
 
-const components = [
-  FabPanelComponent,
-];
+const components = [FabPanelComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabPanelModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Panel', () => Panel);
   }
-
 }

libs/fabric/src/components/persona/persona.component.ts

@@ -1,9 +1,20 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ImageLoadState } from 'office-ui-fabric-react/lib/components/Image/Image.types';
 import { IPersonaCoinProps, IPersonaProps, IPersonaSharedProps } from 'office-ui-fabric-react/lib/Persona';
 
-export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps> extends ReactWrapperComponent<TProps> implements OnInit {
+export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps> extends ReactWrapperComponent<TProps>
+  implements OnInit {
   @Input() text?: IPersonaProps['text'];
   @Input() size?: IPersonaProps['size'];
   @Input() imageShouldFadeIn?: IPersonaProps['imageShouldFadeIn'];
@@ -152,4 +163,3 @@ export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoi
     super(elementRef, changeDetectorRef);
   }
 }
-

libs/fabric/src/components/persona/persona.module.ts

@@ -4,23 +4,18 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Persona, PersonaCoin } from 'office-ui-fabric-react/lib/Persona';
 import { FabPersonaCoinComponent, FabPersonaComponent } from './persona.component';
 
-const components = [
-  FabPersonaComponent,
-  FabPersonaCoinComponent
-];
+const components = [FabPersonaComponent, FabPersonaCoinComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabPersonaModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Persona', () => Persona);
     registerElement('PersonaCoin', () => PersonaCoin);
   }
-
 }

libs/fabric/src/components/pickers/base-picker/base-picker.component.ts

@@ -1,11 +1,23 @@
 import { ReactWrapperComponent, InputRendererOptions, JsxRenderFunc } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, OnInit, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+  OnInit,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IBasePickerProps, BaseAutoFill } from 'office-ui-fabric-react/lib/Pickers';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 import { IPickerItemProps, IBasePickerSuggestionsProps } from 'office-ui-fabric-react/lib/Pickers';
 import omit from '../../../utils/omit';
 
-export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<T>> extends ReactWrapperComponent<TProps> implements OnInit {
+export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<T>>
+  extends ReactWrapperComponent<TProps>
+  implements OnInit {
   @Input() componentRef?: IBasePickerProps<T>['componentRef'];
   @Input() resolveDelay?: IBasePickerProps<T>['resolveDelay'];
   @Input() defaultSelectedItems?: IBasePickerProps<T>['defaultSelectedItems'];
@@ -26,7 +38,8 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
   @Input('getMoreResults') onGetMoreResults?: IBasePickerProps<T>['onGetMoreResults'];
   @Input('validateInput') onValidateInput?: IBasePickerProps<T>['onValidateInput'];
 
-  @Input() set pickerSuggestionsOptions(value: IBasePickerSuggestionsOptions) {
+  @Input()
+  set pickerSuggestionsOptions(value: IBasePickerSuggestionsOptions) {
     this._pickerSuggestionsOptions = value;
 
     if (value) {
@@ -44,11 +57,14 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
   @Output() readonly onChange = new EventEmitter<{ items?: T[] }>();
   @Output() readonly onFocus = new EventEmitter<FocusEvent>();
   @Output() readonly onBlur = new EventEmitter<FocusEvent>();
-  @Output() readonly onDismiss = new EventEmitter<{ ev?: any, selectedItem?: T }>();
+  @Output() readonly onDismiss = new EventEmitter<{ ev?: any; selectedItem?: T }>();
   @Output() readonly onRemoveSuggestion = new EventEmitter<{ item: IPersonaProps }>();
 
   pickerSuggestionsProps: IBasePickerSuggestionsProps;
-  onRenderSuggestionsItem: (props?: IRenderSuggestionItemContext<T>, defaultRender?: JsxRenderFunc<IRenderSuggestionItemContext<T>>) => JSX.Element;
+  onRenderSuggestionsItem: (
+    props?: IRenderSuggestionItemContext<T>,
+    defaultRender?: JsxRenderFunc<IRenderSuggestionItemContext<T>>
+  ) => JSX.Element;
   onRenderItem: (props?: IPickerItemProps<T>, defaultRender?: JsxRenderFunc<IPickerItemProps<T>>) => JSX.Element;
 
   private _pickerSuggestionsOptions: IBasePickerSuggestionsOptions;
@@ -84,7 +100,7 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
 
   onDismissHandler(ev?: any, selectedItem?: T) {
     this.onDismiss.emit({
-      ev: ev && ev.nativeEvent || ev,
+      ev: (ev && ev.nativeEvent) || ev,
       selectedItem,
     });
   }
@@ -95,7 +111,9 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
     });
   }
 
-  private _transformBasePickerSuggestionsOptionsToProps(options: IBasePickerSuggestionsOptions): IBasePickerSuggestionsProps {
+  private _transformBasePickerSuggestionsOptionsToProps(
+    options: IBasePickerSuggestionsOptions
+  ): IBasePickerSuggestionsProps {
     const sharedProperties = omit(options, 'renderNoResultFound', 'renderResultsFooterFull', 'renderResultsFooter');
 
     const noResultFoundRenderer = this.createInputJsxRenderer(options.renderNoResultFound);
@@ -105,14 +123,40 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
     return Object.assign(
       {},
       sharedProperties,
-      noResultFoundRenderer && { onRenderNoResultFound: () => noResultFoundRenderer({}) } as Pick<IBasePickerSuggestionsProps, 'onRenderNoResultFound'>,
-      resultsFooterFullRenderer && { resultsFooterFull: () => resultsFooterFullRenderer({}) } as Pick<IBasePickerSuggestionsProps, 'resultsFooterFull'>,
-      resultsFooterRenderer && { resultsFooter: () => resultsFooterRenderer({}) } as Pick<IBasePickerSuggestionsProps, 'resultsFooter'>,
+      noResultFoundRenderer &&
+        ({ onRenderNoResultFound: () => noResultFoundRenderer({}) } as Pick<
+          IBasePickerSuggestionsProps,
+          'onRenderNoResultFound'
+        >),
+      resultsFooterFullRenderer &&
+        ({ resultsFooterFull: () => resultsFooterFullRenderer({}) } as Pick<
+          IBasePickerSuggestionsProps,
+          'resultsFooterFull'
+        >),
+      resultsFooterRenderer &&
+        ({ resultsFooter: () => resultsFooterRenderer({}) } as Pick<IBasePickerSuggestionsProps, 'resultsFooter'>)
     );
   }
 }
 
-export interface IBasePickerSuggestionsOptions extends Pick<IBasePickerSuggestionsProps, 'suggestionsHeaderText' | 'mostRecentlyUsedHeaderText' | 'noResultsFoundText' | 'className' | 'suggestionsClassName' | 'suggestionsItemClassName' | 'searchForMoreText' | 'forceResolveText' | 'loadingText' | 'searchingText' | 'resultsMaximumNumber' | 'showRemoveButtons' | 'suggestionsAvailableAlertText' | 'suggestionsContainerAriaLabel'> {
+export interface IBasePickerSuggestionsOptions
+  extends Pick<
+      IBasePickerSuggestionsProps,
+      | 'suggestionsHeaderText'
+      | 'mostRecentlyUsedHeaderText'
+      | 'noResultsFoundText'
+      | 'className'
+      | 'suggestionsClassName'
+      | 'suggestionsItemClassName'
+      | 'searchForMoreText'
+      | 'forceResolveText'
+      | 'loadingText'
+      | 'searchingText'
+      | 'resultsMaximumNumber'
+      | 'showRemoveButtons'
+      | 'suggestionsAvailableAlertText'
+      | 'suggestionsContainerAriaLabel'
+    > {
   readonly renderNoResultFound: InputRendererOptions<{}>;
   readonly renderResultsFooterFull: InputRendererOptions<{}>;
   readonly renderResultsFooter: InputRendererOptions<{}>;

libs/fabric/src/components/pickers/base-picker/base-picker.module.ts

@@ -5,13 +5,11 @@ import { BasePicker } from 'office-ui-fabric-react/lib/pickers';
 
 @NgModule({
   imports: [CommonModule],
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabBasePickerModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('BasePicker', () => BasePicker);
   }
-
 }

libs/fabric/src/components/pickers/tag-picker/tag-picker.component.ts

@@ -1,5 +1,13 @@
 import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+  OnInit,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ITagPickerProps, ITag } from 'office-ui-fabric-react/lib/Pickers/TagPicker/TagPicker';
 import { FabBasePickerComponent } from '../base-picker/base-picker.component';
 
@@ -51,4 +59,3 @@ export class FabTagPickerComponent extends FabBasePickerComponent<ITag, ITagPick
     super(elementRef, changeDetectorRef);
   }
 }
-

libs/fabric/src/components/pickers/tag-picker/tag-picker.module.ts

@@ -3,23 +3,19 @@ import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FabBasePickerModule } from '../base-picker/base-picker.module';
 import { FabTagPickerComponent } from './tag-picker.component';
-import { TagPicker } from 'office-ui-fabric-react/lib/Pickers/TagPicker/TagPicker'
+import { TagPicker } from 'office-ui-fabric-react/lib/Pickers/TagPicker/TagPicker';
 
-const components = [
-  FabTagPickerComponent
-];
+const components = [FabTagPickerComponent];
 
 @NgModule({
   imports: [CommonModule, FabBasePickerModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabTagPickerModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('TagPicker', () => TagPicker as any);
   }
-
 }

libs/fabric/src/components/pivot/pivot.component.ts

@@ -1,5 +1,17 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent, passProp } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  QueryList,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
 import * as React from 'react';
 
@@ -28,31 +40,40 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @passProp()
-  @Input() componentRef?: IPivotItemProps['componentRef'];
+  @Input()
+  componentRef?: IPivotItemProps['componentRef'];
 
   @passProp()
-  @Input() headerText?: IPivotItemProps['headerText'];
+  @Input()
+  headerText?: IPivotItemProps['headerText'];
 
   @passProp()
-  @Input() headerButtonProps?: IPivotItemProps['headerButtonProps'];
+  @Input()
+  headerButtonProps?: IPivotItemProps['headerButtonProps'];
 
   @passProp()
-  @Input() itemKey?: IPivotItemProps['itemKey'];
+  @Input()
+  itemKey?: IPivotItemProps['itemKey'];
 
   @passProp()
-  @Input() ariaLabel?: IPivotItemProps['ariaLabel'];
+  @Input()
+  ariaLabel?: IPivotItemProps['ariaLabel'];
 
   @passProp()
-  @Input() itemCount?: IPivotItemProps['itemCount'];
+  @Input()
+  itemCount?: IPivotItemProps['itemCount'];
 
   @passProp()
-  @Input() itemIcon?: IPivotItemProps['itemIcon'];
+  @Input()
+  itemIcon?: IPivotItemProps['itemIcon'];
 
   @passProp()
-  @Input() keytipProps?: IPivotItemProps['keytipProps'];
+  @Input()
+  keytipProps?: IPivotItemProps['keytipProps'];
 
   @passProp()
-  @Input() renderItemLink?: InputRendererOptions<IPivotItemProps>;
+  @Input()
+  renderItemLink?: InputRendererOptions<IPivotItemProps>;
 
   onRenderItemLink: (props?: IPivotItemProps, defaultRender?: JsxRenderFunc<IPivotItemProps>) => JSX.Element;
 
@@ -96,7 +117,6 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
-
   readonly PivotType = Pivot;
   readonly PivotItemType = PivotItem;
 
@@ -116,7 +136,7 @@ export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
   @Input() headersOnly?: IPivotProps['headersOnly'];
   @Input() getTabId?: IPivotProps['getTabId'];
 
-  @Output() readonly onLinkClick = new EventEmitter<{ item?: PivotItem, ev?: MouseEvent }>();
+  @Output() readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>();
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef, true);

libs/fabric/src/components/pivot/pivot.module.ts

@@ -4,23 +4,18 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
 import { FabPivotComponent, FabPivotItemComponent } from './pivot.component';
 
-const components = [
-  FabPivotComponent,
-  FabPivotItemComponent
-];
+const components = [FabPivotComponent, FabPivotItemComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabPivotModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Pivot', () => Pivot);
     registerElement('PivotItem', () => PivotItem);
   }
-
 }

libs/fabric/src/components/search-box/search-box.component.ts

@@ -1,5 +1,15 @@
 import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  OnInit,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ISearchBoxProps } from 'office-ui-fabric-react/lib/SearchBox';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
@@ -34,7 +44,6 @@ import omit from '../../utils/omit';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps> {
-
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @Input() componentRef?: ISearchBoxProps['componentRef'];
@@ -48,7 +57,8 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
   @Input() theme?: ISearchBoxProps['theme'];
   @Input() styles?: ISearchBoxProps['styles'];
   @Input() disableAnimation?: ISearchBoxProps['disableAnimation'];
-  @Input() set clearButtonOptions(value: IButtonOptions) {
+  @Input()
+  set clearButtonOptions(value: IButtonOptions) {
     this._clearButtonOptions = value;
 
     if (value) {
@@ -82,32 +92,33 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
 
   onChangeHandler(newValue: any) {
     this.onChange.emit({
-      newValue
+      newValue,
     });
   }
   onSearchHandler(newValue: any) {
     this.onSearch.emit({
-      newValue
+      newValue,
     });
   }
   onClearHandler(ev?: any) {
     this.onClear.emit({
-      ev: ev && ev.nativeElement || ev,
+      ev: (ev && ev.nativeElement) || ev,
     });
   }
   onEscapeHandler(ev?: any) {
     this.onEscape.emit({
-      ev: ev && ev.nativeElement || ev,
+      ev: (ev && ev.nativeElement) || ev,
     });
   }
   onChangedHandler(newValue: any) {
     this.onChange.emit({
-      newValue
+      newValue,
     });
   }
 
   private _transformButtonOptionsToProps(options: IButtonOptions): IButtonProps {
-    const sharedProperties = omit(options,
+    const sharedProperties = omit(
+      options,
       'renderIcon',
       'renderText',
       'renderDescription',
@@ -128,19 +139,58 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
     return Object.assign(
       {},
       sharedProperties,
-      iconRenderer && { onRenderIcon: props => iconRenderer(props) } as Pick<IButtonProps, 'onRenderIcon'>,
-      textRenderer && { onRenderText: props => textRenderer(props) } as Pick<IButtonProps, 'onRenderText'>,
-      descriptionRenderer && { onRenderDescription: props => descriptionRenderer(props) } as Pick<IButtonProps, 'onRenderDescription'>,
-      ariaDescriptionRenderer && { onRenderAriaDescription: props => ariaDescriptionRenderer(props) } as Pick<IButtonProps, 'onRenderAriaDescription'>,
-      childrenRenderer && { onRenderChildren: props => childrenRenderer(props) } as Pick<IButtonProps, 'onRenderChildren'>,
-      menuIconRenderer && { onRenderMenuIcon: props => menuIconRenderer(props) } as Pick<IButtonProps, 'onRenderMenuIcon'>,
-      menuRenderer && { onRenderMenu: props => menuRenderer(props) } as Pick<IButtonProps, 'onRenderMenu'>,
+      iconRenderer && ({ onRenderIcon: props => iconRenderer(props) } as Pick<IButtonProps, 'onRenderIcon'>),
+      textRenderer && ({ onRenderText: props => textRenderer(props) } as Pick<IButtonProps, 'onRenderText'>),
+      descriptionRenderer &&
+        ({ onRenderDescription: props => descriptionRenderer(props) } as Pick<IButtonProps, 'onRenderDescription'>),
+      ariaDescriptionRenderer &&
+        ({ onRenderAriaDescription: props => ariaDescriptionRenderer(props) } as Pick<
+          IButtonProps,
+          'onRenderAriaDescription'
+        >),
+      childrenRenderer &&
+        ({ onRenderChildren: props => childrenRenderer(props) } as Pick<IButtonProps, 'onRenderChildren'>),
+      menuIconRenderer &&
+        ({ onRenderMenuIcon: props => menuIconRenderer(props) } as Pick<IButtonProps, 'onRenderMenuIcon'>),
+      menuRenderer && ({ onRenderMenu: props => menuRenderer(props) } as Pick<IButtonProps, 'onRenderMenu'>)
     );
   }
-
 }
 
-export interface IButtonOptions extends Pick<IButtonProps, 'componentRef' | 'href' | 'primary' | 'uniqueId' | 'disabled' | 'allowDisabledFocus' | 'primaryDisabled' | 'styles' | 'theme' | 'checked' | 'className' | 'ariaLabel' | 'ariaDescription' | 'ariaHidden' | 'text' | 'iconProps' | 'menuProps' | 'onAfterMenuDismiss' | 'split' | 'menuIconProps' | 'splitButtonAriaLabel' | 'onMenuClick' | 'secondaryText' | 'toggled' | 'data' | 'getClassNames' | 'getSplitButtonClassNames' | 'menuTriggerKeyCode' | 'keytipProps' | 'persistMenu'> {
+export interface IButtonOptions
+  extends Pick<
+      IButtonProps,
+      | 'componentRef'
+      | 'href'
+      | 'primary'
+      | 'uniqueId'
+      | 'disabled'
+      | 'allowDisabledFocus'
+      | 'primaryDisabled'
+      | 'styles'
+      | 'theme'
+      | 'checked'
+      | 'className'
+      | 'ariaLabel'
+      | 'ariaDescription'
+      | 'ariaHidden'
+      | 'text'
+      | 'iconProps'
+      | 'menuProps'
+      | 'onAfterMenuDismiss'
+      | 'split'
+      | 'menuIconProps'
+      | 'splitButtonAriaLabel'
+      | 'onMenuClick'
+      | 'secondaryText'
+      | 'toggled'
+      | 'data'
+      | 'getClassNames'
+      | 'getSplitButtonClassNames'
+      | 'menuTriggerKeyCode'
+      | 'keytipProps'
+      | 'persistMenu'
+    > {
   readonly renderIcon: InputRendererOptions<IButtonProps>;
   readonly renderText: InputRendererOptions<IButtonProps>;
   readonly renderDescription: InputRendererOptions<IButtonProps>;

libs/fabric/src/components/search-box/search-box.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { FabSearchBoxComponent } from './search-box.component';
 
-const components = [
-  FabSearchBoxComponent,
-];
+const components = [FabSearchBoxComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabSearchBoxModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('SearchBox', () => SearchBox);
   }
-
 }

libs/fabric/src/components/shimmer/shimmer.component.ts

@@ -1,5 +1,13 @@
 import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+  OnInit,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IShimmerProps } from 'office-ui-fabric-react/lib/Shimmer';
 import { IShimmerElementsGroupProps } from 'office-ui-fabric-react/lib/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types';
 
@@ -36,7 +44,8 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
   @Input() className?: IShimmerProps['className'];
   @Input() theme?: IShimmerProps['theme'];
 
-  @Input() set renderCustomElementsGroup(value: InputRendererOptions<{}>) {
+  @Input()
+  set renderCustomElementsGroup(value: InputRendererOptions<{}>) {
     this._renderCustomElementsGroup = value;
 
     if (value) {

libs/fabric/src/components/shimmer/shimmer.module.ts

@@ -4,23 +4,18 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Shimmer, ShimmerElementsGroup } from 'office-ui-fabric-react/lib/Shimmer';
 import { FabShimmerComponent, FabShimmerElementsGroupComponent } from './shimmer.component';
 
-const components = [
-  FabShimmerComponent,
-  FabShimmerElementsGroupComponent,
-];
+const components = [FabShimmerComponent, FabShimmerElementsGroupComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabShimmerModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Shimmer', () => Shimmer);
     registerElement('ShimmerElementsGroup', () => ShimmerElementsGroup);
   }
-
 }

libs/fabric/src/components/slider/slider.component.ts

@@ -1,5 +1,14 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ISliderProps } from 'office-ui-fabric-react/lib/Slider';
 
 @Component({

libs/fabric/src/components/slider/slider.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Slider } from 'office-ui-fabric-react/lib/Slider';
 import { FabSliderComponent } from './slider.component';
 
-const components = [
-  FabSliderComponent,
-];
+const components = [FabSliderComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabSliderModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Slider', () => Slider);
   }
-
 }

libs/fabric/src/components/spinner/spinner.component.ts

@@ -38,5 +38,4 @@ export class FabSpinnerComponent extends ReactWrapperComponent<ISpinnerProps> {
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/spinner/spinner.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
 import { FabSpinnerComponent } from './spinner.component';
 
-const components = [
-  FabSpinnerComponent,
-];
+const components = [FabSpinnerComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabSpinnerModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Spinner', () => Spinner);
   }
-
 }

libs/fabric/src/components/toggle/toggle.component.ts

@@ -1,5 +1,14 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IToggleProps } from 'office-ui-fabric-react/lib/Toggle';
 
 @Component({
@@ -58,5 +67,4 @@ export class FabToggleComponent extends ReactWrapperComponent<IToggleProps> {
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }

libs/fabric/src/components/toggle/toggle.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { FabToggleComponent } from './toggle.component';
 
-const components = [
-  FabToggleComponent,
-];
+const components = [FabToggleComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabToggleModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Toggle', () => Toggle);
   }
-
 }

libs/fabric/src/components/tooltip/tooltip-host.component.ts

@@ -1,5 +1,15 @@
 import { ReactWrapperComponent, InputRendererOptions, JsxRenderFunc } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, OnInit, EventEmitter, Output, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+  OnInit,
+  EventEmitter,
+  Output,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ITooltipHostProps } from 'office-ui-fabric-react/lib/Tooltip';
 import { ITooltipProps } from 'office-ui-fabric-react/lib/Tooltip';
 import { omit } from '../../utils/omit';
@@ -26,7 +36,7 @@ import { omit } from '../../utils/omit';
       <ReactContent><ng-content></ng-content></ReactContent>
     </TooltipHost>
   `,
-  styles: [    'react-renderer'  ],
+  styles: ['react-renderer'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostProps> {
@@ -43,19 +53,19 @@ export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostP
   @Input() hostClassName?: ITooltipHostProps['hostClassName'];
   @Input() closeDelay?: ITooltipHostProps['closeDelay'];
 
-  @Input() set tooltipOptions(value: ITooltipOptions) {
-     this._tooltipOptions = value;
-     if (value) {
-       this.transformedTooltipProps = this._transformTooltipOptionsToProps(value);
-     }
-
+  @Input()
+  set tooltipOptions(value: ITooltipOptions) {
+    this._tooltipOptions = value;
+    if (value) {
+      this.transformedTooltipProps = this._transformTooltipOptionsToProps(value);
+    }
   }
 
-  get tooltipOptions() : ITooltipOptions {
+  get tooltipOptions(): ITooltipOptions {
     return this._tooltipOptions;
   }
 
-  @Output() readonly onTooltipToggle = new EventEmitter< { isTooltipVisible: boolean }>();
+  @Output() readonly onTooltipToggle = new EventEmitter<{ isTooltipVisible: boolean }>();
 
   transformedTooltipProps: ITooltipHostProps['tooltipProps'];
   private _tooltipOptions: ITooltipOptions;
@@ -78,7 +88,7 @@ export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostP
     return Object.assign(
       {},
       sharedProperties,
-      contentRenderer && { onRenderContent: data => contentRenderer(data) } as Pick<ITooltipProps, 'onRenderContent'>,
+      contentRenderer && ({ onRenderContent: data => contentRenderer(data) } as Pick<ITooltipProps, 'onRenderContent'>)
     );
   }
 }
@@ -86,6 +96,19 @@ export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostP
 /**
  * Counterpart of `ITooltipProps`, with Angular adjustments.
  */
-export interface ITooltipOptions extends Pick<ITooltipProps, 'componentRef' | 'calloutProps' | 'content' | 'delay' | 'maxWidth' | 'targetElement' | 'directionalHint' | 'directionalHintForRTL' | 'theme' | 'styles'> {
+export interface ITooltipOptions
+  extends Pick<
+      ITooltipProps,
+      | 'componentRef'
+      | 'calloutProps'
+      | 'content'
+      | 'delay'
+      | 'maxWidth'
+      | 'targetElement'
+      | 'directionalHint'
+      | 'directionalHintForRTL'
+      | 'theme'
+      | 'styles'
+    > {
   readonly renderContent?: InputRendererOptions<ITooltipProps>;
 }

libs/fabric/src/components/tooltip/tooltip.module.ts

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { FabTooltipHostComponent } from './tooltip-host.component';
 
-const components = [
-  FabTooltipHostComponent,
-];
+const components = [FabTooltipHostComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabTooltipModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('TooltipHost', () => TooltipHost);
   }
-
 }

libs/fabric/src/utils/omit.ts

@@ -1,12 +1,10 @@
-export function omit<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Partial<T> /* Can replace with Exclude type from TS 2.8 */ {
+export function omit<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: K[]
+): Partial<T> /* Can replace with Exclude type from TS 2.8 */ {
   return Object.keys(obj)
     .filter(key => !keys.includes(key as K))
-    .reduce<Partial<T>>((acc, key) =>
-      Object.assign(
-        acc,
-        { [key]: obj[key] }
-      ), {}
-    );
+    .reduce<Partial<T>>((acc, key) => Object.assign(acc, { [key]: obj[key] }), {});
 }
 
 export default omit;

libs/fabric/src/utils/pick.ts

@@ -1,10 +1,5 @@
 export function pick<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
-  return keys.reduce<Pick<T, K>>((acc, key) =>
-    Object.assign(
-      acc,
-      { [key]: obj[key] }
-    ), {} as any
-  );
+  return keys.reduce<Pick<T, K>>((acc, key) => Object.assign(acc, { [key]: obj[key] }), {} as any);
 }
 
 export default pick;