Added Nav component and module (#88)

Author: eswarpr

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

@@ -0,0 +1,83 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent } from '@angular-react/core';
+import { INavProps, INavLink, INav } from 'office-ui-fabric-react';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  ViewChild,
+  ElementRef,
+  ChangeDetectorRef,
+  Renderer2,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+
+@Component({
+  selector: 'fab-nav',
+  exportAs: 'fabNav',
+  template: `
+    <Nav
+      #reactNode
+      [groups]="groups"
+      [LinkClick]="onLinkClickHandler"
+      [selectedKey]="selectedKey"
+      [expandButtonAriaLabel]="expandButtonAriaLabel"
+      [expandedStateText]="expandedStateText"
+      [collapsedStateText]="collapsedStateText"
+      [LinkExpandClick]="onLinkExpandClickHandler"
+      [isOnTop]="isOnTop"
+      [initialSelectedKey]="initialSelectedKey"
+      [ariaLabel]="ariaLabel"
+    >
+    </Nav>
+  `,
+  styles: ['react-renderer'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabNavComponent extends ReactWrapperComponent<INavProps> {
+  @ViewChild('reactNode')
+  protected reactNodeRef: ElementRef;
+
+  @Input() componentRef?: INavProps['componentRef'];
+  @Input() groups: INavProps["groups"];
+  @Input() selectedKey: INavProps["selectedKey"];
+  @Input() expandedStateText: INavProps["expandedStateText"];
+  @Input() collapsedStateText: INavProps["collapsedStateText"];
+  @Input() isOnTop: INavProps["isOnTop"];
+  @Input() initialSelectedKey: INavProps["initialSelectedKey"];
+  @Input() ariaLabel: INavProps["ariaLabel"];
+  @Input() expandButtonAriaLabel: INavProps["expandButtonAriaLabel"];
+
+
+  @Output() readonly onLinkClick = new EventEmitter<{
+    event: Event,
+    link: INavLink
+  }>();
+  @Output() readonly onLinkExpandClick = new EventEmitter<{
+    event: Event,
+    link: INavLink
+  }>();
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+    this.onLinkClickHandler = this.onLinkClickHandler.bind(this);
+    this.onLinkExpandClickHandler = this.onLinkExpandClickHandler.bind(this);
+  }
+
+  onLinkClickHandler(event: React.MouseEvent<HTMLElement>, link?: INavLink): void {
+    this.onLinkClick.emit({
+      event: event.nativeEvent,
+      link: link
+    });
+  }
+
+  onLinkExpandClickHandler(event: React.MouseEvent<HTMLElement>, link?: INavLink): void {
+    this.onLinkExpandClick.emit({
+      event: event.nativeEvent,
+      link: link
+    });
+  }
+}

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

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { registerElement } from "@angular-react/core";
+import { Nav } from "office-ui-fabric-react";
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FabNavComponent } from "./nav.component";
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: [FabNavComponent],
+    exports: [FabNavComponent],
+    schemas: [NO_ERRORS_SCHEMA]
+})
+export class FabNavModule {
+    constructor() {
+        registerElement('Nav', () => Nav)
+    }
+}

libs/fabric/src/lib/components/nav/public-api.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+export * from './nav.module';
+export * from './nav.component';

libs/fabric/src/public-api.ts

@@ -36,6 +36,7 @@ export * from './lib/components/spinner/public-api';
 export * from './lib/components/text-field/public-api';
 export * from './lib/components/toggle/public-api';
 export * from './lib/components/tooltip/public-api';
+export * from './lib/components/nav/public-api';
 
 // Pickers had some warnings at runtime. Leaving out of public API for now
 // export * from './lib/components/pickers/public-api';