Marquee {{ marqueeEnabled === false ? 'Disabled' : 'Enabled' }}
-
- {{peoplePickerSelectedItems.length}} item(s) selected in the people picker
+
+ {{peoplePickerSelectedItems.length}} item(s) selected in the people picker
+
diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts
index cbe980c..fcacaa1 100644
--- a/apps/demo/src/app/app.module.ts
+++ b/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],
diff --git a/libs/fabric/src/lib/components/progress-indicator/progress-indicator.component.ts b/libs/fabric/src/lib/components/progress-indicator/progress-indicator.component.ts
new file mode 100644
index 0000000..630851b
--- /dev/null
+++ b/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: `
+
+
+ `,
+ styles: ['react-renderer'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabProgressIndicatorComponent extends ReactWrapperComponent implements OnInit {
+ @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
+
+ @Input() ariaValueText?: IProgressIndicatorProps['ariaValueText'];
+ @Input() barHeight?: IProgressIndicatorProps['barHeight'];
+ @Input() className?: IProgressIndicatorProps['className'];
+ @Input() renderProgress?: InputRendererOptions;
+ @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) => JSX.Element;
+
+ constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+ super(elementRef, changeDetectorRef, renderer);
+ }
+
+ ngOnInit() {
+ this.onRenderProgress = this.createRenderPropHandler(this.renderProgress);
+ }
+}
diff --git a/libs/fabric/src/lib/components/progress-indicator/progress-indicator.module.ts b/libs/fabric/src/lib/components/progress-indicator/progress-indicator.module.ts
new file mode 100644
index 0000000..0371ea3
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/libs/fabric/src/lib/components/progress-indicator/public-api.ts b/libs/fabric/src/lib/components/progress-indicator/public-api.ts
new file mode 100644
index 0000000..9e21888
--- /dev/null
+++ b/libs/fabric/src/lib/components/progress-indicator/public-api.ts
@@ -0,0 +1,2 @@
+export * from './progress-indicator.component';
+export * from './progress-indicator.module';
diff --git a/libs/fabric/src/public-api.ts b/libs/fabric/src/public-api.ts
index 185fd02..b265065 100644
--- a/libs/fabric/src/public-api.ts
+++ b/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';