feat(menu): Add selected property to menu items (#665)

Change as per material-components-web v0.30.0
reference: material-components/material-components-web#2084

Adds `mdc-list-item--selected` class to menu items when `rememberSelection` is set to `true`.

#### New Public methods
- [x] Add `setRememberSelection(rememberSelection: boolean)`
- [x] Add `getSelectedIndex(): number`
- [x] Add `setSelectedIndex(index): void`
- [x] Add `setMaxHeight(height: number): void`

Closes #618

src/lib/menu/menu-module.ts

@@ -9,7 +9,7 @@ import {
   MdcMenuItems,
 } from './menu';
 
-const MENU_COMPONENTS = [
+const MENU_DECLARATIONS = [
   MdcMenu,
   MdcMenuAnchor,
   MdcMenuDivider,
@@ -19,7 +19,7 @@ const MENU_COMPONENTS = [
 
 @NgModule({
   imports: [CommonModule],
-  exports: [MENU_COMPONENTS],
-  declarations: [MENU_COMPONENTS],
+  exports: [MENU_DECLARATIONS],
+  declarations: [MENU_DECLARATIONS],
 })
 export class MdcMenuModule { }

src/lib/menu/menu.ts

@@ -219,9 +219,21 @@ export class MdcMenu implements AfterViewInit, OnChanges, OnDestroy {
       position.top ? this._setStyle(position.top, 'top') : this._removeStyle('top');
       position.bottom ? this._setStyle(position.bottom, 'bottom') : this._removeStyle('bottom');
     },
-    setMaxHeight: (height) => {
+    setMaxHeight: (height: string) => {
       this._renderer.setStyle(this.elementRef.nativeElement, 'maxHeight', height);
     },
+    setAttrForOptionAtIndex: (index: number, attr: string, value: string) => {
+      this._renderer.setAttribute(this.options.toArray()[index].elementRef.nativeElement, attr, value);
+    },
+    rmAttrForOptionAtIndex: (index: number, attr: string) => {
+      this._renderer.removeAttribute(this.options.toArray()[index].elementRef.nativeElement, attr);
+    },
+    addClassForOptionAtIndex: (index: number, className: string) => {
+      this._renderer.addClass(this.options.toArray()[index].elementRef.nativeElement, className);
+    },
+    rmClassForOptionAtIndex: (index: number, className: string) => {
+      this._renderer.removeClass(this.options.toArray()[index].elementRef.nativeElement, className);
+    }
   };
 
   private _foundation: {
@@ -233,6 +245,9 @@ export class MdcMenu implements AfterViewInit, OnChanges, OnDestroy {
     setAnchorCorner(corner: Corner): void,
     setAnchorMargin(): void,
     setQuickOpen(quickOpen: boolean): void,
+    setRememberSelection(rememberSelection: boolean): void,
+    setSelectedIndex(index: number): void,
+    getSelectedIndex(): number
   } = new MDCMenuFoundation(this._mdcAdapter);
 
   constructor(
@@ -256,6 +271,18 @@ export class MdcMenu implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
+  setRememberSelection(rememberSelection: boolean): void {
+    this._foundation.setRememberSelection(rememberSelection);
+  }
+
+  setSelectedIndex(index: number): void {
+    this._foundation.setSelectedIndex(index);
+  }
+
+  getSelectedIndex(): number {
+    return this._foundation.getSelectedIndex();
+  }
+
   private _setStyle(position: string, anchorPoint: string): void {
     this._renderer.setStyle(this.elementRef.nativeElement, anchorPoint, position);
   }
@@ -322,4 +349,8 @@ export class MdcMenu implements AfterViewInit, OnChanges, OnDestroy {
   setQuickOpen(quickOpen: boolean): void {
     this._foundation.setQuickOpen(quickOpen);
   }
+
+  setMaxHeight(height: string): void {
+    this._mdcAdapter.setMaxHeight(height);
+  }
 }

src/lib/menu/tsconfig-build.json

@@ -9,6 +9,7 @@
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular-mdc/web/menu",
-    "skipTemplateCodegen": true
+    "skipTemplateCodegen": true,
+    "fullTemplateTypeCheck": true
   }
 }

test/unit/menu/menu.test.ts

@@ -82,6 +82,12 @@ describe('MdcMenu', () => {
       testDebugElement.nativeElement.click();
       fixture.detectChanges();
     });
+
+    it('#should get selected index', () => {
+      testInstance.setSelectedIndex(2);
+      fixture.detectChanges();
+      expect(testInstance.getSelectedIndex()).toBe(2);
+    });
   });
 });