feat: add Rating Component

libs/fabric/lib/components/rating/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

libs/fabric/lib/components/rating/public-api.ts

@@ -0,0 +1,4 @@
+import { expressionType } from '@angular/compiler/src/output/output_ast';
+
+export * from './rating.component';
+export * from './rating.module';

libs/fabric/lib/components/rating/rating.component.ts

@@ -0,0 +1,74 @@
+import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core';
+import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, Output, Renderer2, ViewChild, EventEmitter } from '@angular/core';
+import { IRatingProps } from 'office-ui-fabric-react/lib/Rating';
+
+@Component({
+  selector: 'fab-rating',
+  exportAs: 'fabRating',
+  template: `
+    <Rating
+      #reactNode
+      [componentRef]="componentRef"
+      [rating]="rating"
+      [min]="min"
+      [max]="max"
+      [allowZeroStars]="allowZeroStars"
+      [icon]="icon"
+      [unselectedIcon]="unselectedIcon"
+      [size]="size"
+      [Change]="onChange"
+      [Changed]="onChanged"
+      [ariaLabelFormat]="ariaLabelFormat"
+      [ariaLabelId]="ariaLabelId"
+      [readOnly]="readOnly"
+      [getAriaLabel]="getAriaLabel"
+      [styles]="styles"
+      [theme]="theme"
+    ></Rating>
+  `,
+  styles: ['react-renderer'],
+})
+export class FabRatingComponent extends ReactWrapperComponent<IRatingProps> {
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
+
+  @Input() componentRef?: IRatingProps['componentRef'];
+  @Input() rating?: IRatingProps['rating'];
+  @Input() min?: IRatingProps['min'];
+  @Input() max?: IRatingProps['max'];
+  @Input() allowZeroStars?: IRatingProps['allowZeroStars'];
+  @Input() icon?: IRatingProps['icon'];
+  @Input() unselectedIcon?: IRatingProps['unselectedIcon'];
+  @Input() size?: IRatingProps['size'];
+  // @Input() onChanged?: IRatingProps['onChanged'];
+  @Input() ariaLabelFormat?: IRatingProps['ariaLabelFormat'];
+  @Input() ariaLabelId?: IRatingProps['ariaLabelId'];
+  @Input() readOnly?: IRatingProps['readOnly'];
+  @Input() getAriaLabel?: IRatingProps['getAriaLabel'];
+  @Input() styles?: IRatingProps['styles'];
+  @Input() theme?: IRatingProps['theme'];
+
+  // tslint:disable-next-line: no-output-on-prefix
+  @Output() readonly onRatingChange = new EventEmitter<{ ev?: FocusEvent, rating?: number }>();
+  // tslint:disable-next-line: no-output-on-prefix
+  @Output() readonly onRatingChanged = new EventEmitter<{ rating?: number }>();
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { ngZone });
+
+    this.onChange = this.onChange.bind(this);
+    this.onChanged = this.onChanged.bind(this);
+  }
+
+  onChange(ev?: React.FocusEvent<HTMLElement>, rating?: number) {
+    this.onRatingChange.emit({
+      ev: ev && ev.nativeEvent,
+      rating
+    });
+  }
+
+  onChanged(rating?: number) {
+    this.onRatingChanged.emit({
+      rating
+    })
+  }
+}

libs/fabric/lib/components/rating/rating.module.ts

@@ -0,0 +1,20 @@
+
+import { registerElement } from '@angular-react/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Rating } from 'office-ui-fabric-react/lib/Rating';
+import { FabRatingComponent } from './rating.component';
+
+const components = [FabRatingComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabRatingModule {
+  constructor() {
+    registerElement('Rating', () => Rating);
+  }
+}

libs/fabric/public-api.ts

@@ -42,5 +42,6 @@ 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';
+export * from './lib/components/rating/public-api';
 
 export * from './lib/declarations/public-api';