Add ProgressIndicator support in fabric

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

@@ -192,7 +192,7 @@
       weekNumberFormatString="Week number {0}"
     ></fab-calendar-strings>
   </fab-calendar>
-  
+
   <fab-marquee-selection [isEnabled]="marqueeEnabled" [selection]="selection">
     <fab-details-list
       [selection]="selection"
@@ -254,6 +254,7 @@
   <fab-default-button (onClick)="marqueeEnabled = !marqueeEnabled">
     Marquee {{ marqueeEnabled === false ? 'Disabled' : 'Enabled' }}
   </fab-default-button>
-  <fab-people-picker [inputProps]="{placeholder: 'Search for a person'}" [pickerSuggestionsOptions]="{noResultsFoundText: 'No results found', loadingText: 'Loading'}"  [selectedItems]="peoplePickerSelectedItems" (onChange)="updatePeoplePickerSelectedItems($event)" [resolveSuggestions]="peoplePickerInputChanged"></fab-people-picker> 
-  <div>{{peoplePickerSelectedItems.length}} item(s) selected in the people picker</div> 
+  <fab-people-picker [inputProps]="{placeholder: 'Search for a person'}" [pickerSuggestionsOptions]="{noResultsFoundText: 'No results found', loadingText: 'Loading'}"  [selectedItems]="peoplePickerSelectedItems" (onChange)="updatePeoplePickerSelectedItems($event)" [resolveSuggestions]="peoplePickerInputChanged"></fab-people-picker>
+  <div>{{peoplePickerSelectedItems.length}} item(s) selected in the people picker</div>
+  <fab-progress-indicator bar-height="4"  [percentComplete]="0.35" description="Progress indicator description" label="Progress indicator label"></fab-progress-indicator>
  </div>

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

@@ -36,6 +36,7 @@ import {
   FabTextFieldModule,
   FabPeoplePickerModule,
   FabTagPickerModule,
+  FabProgressIndicatorModule
 } from '@angular-react/fabric';
 import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
@@ -82,7 +83,8 @@ import { CounterComponent } from './counter/counter.component';
     FabSpinButtonModule,
     FabTextFieldModule,
     FabPeoplePickerModule,
-    FabTagPickerModule
+    FabTagPickerModule,
+    FabProgressIndicatorModule
   ],
   declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],

libs/fabric/src/lib/components/progress-indicator/progress-indicator.component.ts

@@ -0,0 +1,92 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent, JsxRenderFunc, InputRendererOptions } from '@angular-react/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  Renderer2,
+  ViewChild,
+  OnInit,
+} from '@angular/core';
+import { IProgressIndicatorProps } from 'office-ui-fabric-react/lib/ProgressIndicator';
+
+@Component({
+  selector: 'fab-progress-indicator',
+  exportAs: 'fabProgressIndicator',
+  template: `
+    <ProgressIndicator
+      #reactNode
+      [ariaValueText]="ariaValueText"
+      [barHeight]="barHeight"
+      [className]="className"
+      [description]="description"
+      [label]="label"
+      [RenderProgress]="renderProgress && onRenderProgress"
+      [percentComplete]="percentComplete"
+      [progressHidden]="progressHidden"
+      [styles]="styles"
+      [theme]="theme"
+    >
+    </ProgressIndicator>
+  `,
+  styles: ['react-renderer'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabProgressIndicatorComponent extends ReactWrapperComponent<IProgressIndicatorProps> implements OnInit {
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
+
+  @Input() ariaValueText?: IProgressIndicatorProps['ariaValueText'];
+  @Input() barHeight?: IProgressIndicatorProps['barHeight'];
+  @Input() className?: IProgressIndicatorProps['className'];
+  @Input() renderProgress?: InputRendererOptions<IProgressIndicatorProps>;
+  @Input() percentComplete?: IProgressIndicatorProps['percentComplete'];
+  @Input() progressHidden?: IProgressIndicatorProps['progressHidden'];
+  @Input() styles?: IProgressIndicatorProps['styles'];
+  @Input() theme?: IProgressIndicatorProps['theme'];
+
+  @Input()
+  set renderDescription(value: InputRendererOptions<{}>) {
+    this._renderDescription = value;
+
+    if (value) {
+      this.description = this.createInputJsxRenderer(value)({});
+    }
+  }
+
+  get renderDescription(): InputRendererOptions<{}> {
+    return this._renderDescription;
+  }
+
+  description?: React.ReactNode;
+  private _renderDescription?: InputRendererOptions<{}>;
+
+  @Input()
+  set renderLabel(value: InputRendererOptions<{}>) {
+    this._renderLabel = value;
+
+    if (value) {
+      this.label = this.createInputJsxRenderer(value)({});
+    }
+  }
+
+  get renderLabel(): InputRendererOptions<{}> {
+    return this._renderLabel;
+  }
+
+  label?: React.ReactNode;
+  private _renderLabel?: InputRendererOptions<{}>;
+
+  onRenderProgress: (props?: IProgressIndicatorProps, defaultRender?: JsxRenderFunc<IProgressIndicatorProps>) => JSX.Element;
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+  }
+
+  ngOnInit() {
+    this.onRenderProgress = this.createRenderPropHandler(this.renderProgress);
+  }
+}

libs/fabric/src/lib/components/progress-indicator/progress-indicator.module.ts

@@ -0,0 +1,22 @@
+// 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 { ProgressIndicator } from 'office-ui-fabric-react';
+import { FabProgressIndicatorComponent } from './progress-indicator.component';
+
+const components = [FabProgressIndicatorComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabProgressIndicatorModule {
+  constructor() {
+    registerElement('ProgressIndicator', () => ProgressIndicator);
+  }
+}

libs/fabric/src/lib/components/progress-indicator/public-api.ts

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

libs/fabric/src/public-api.ts

@@ -38,3 +38,4 @@ export * from './lib/components/toggle/public-api';
 export * from './lib/components/tooltip/public-api';
 export * from './lib/components/nav/public-api';
 export * from './lib/components/pickers/public-api';
+export * from './lib/components/progress-indicator/public-api';