refactor(aio): use the SelectMenuComponent for all select menus

The API filters and the docs version switcher now use
the SelectMenuComponent.

Fixes #16367 and #17055

aio/src/app/embedded/api/api-list.component.html

@@ -1,26 +1,17 @@
 <div class="l-flex-wrap info-banner api-filter">
 
-  <div class="form-select-menu">
-    <button class="form-select-button has-symbol" (click)="toggleTypeMenu()">
-      <strong>Type:</strong><span class="symbol {{type.name}}"></span>{{type.title}}
-    </button>
-    <ul class="form-select-dropdown" *ngIf="showTypeMenu">
-      <li *ngFor="let t of types" (click)="setType(t)" [class.selected]="t === type">
-        <span class="symbol {{t.name}}"></span>{{t.title}}
-      </li>
-    </ul>
-  </div>
+  <aio-select (change)="setType($event.option)"
+              [options]="types"
+              [selected]="type"
+              [showSymbol]="true"
+              label="Type:">
+  </aio-select>
 
-  <div class="form-select-menu">
-    <button class="form-select-button" (click)="toggleStatusMenu()">
-      <strong>Status:</strong>{{status.title}}
-    </button>
-    <ul class="form-select-dropdown" *ngIf="showStatusMenu">
-      <li *ngFor="let s of statuses" (click)="setStatus(s)" [class.selected]="s === status">
-        {{s.title}}
-      </li>
-    </ul>
-  </div>
+  <aio-select (change)="setStatus($event.option)"
+              [options]="statuses"
+              [selected]="status"
+              label="Status:">
+  </aio-select>
 
   <div class="form-search">
     <input #filter placeholder="Filter" (input)="setQuery($event.target.value)">

aio/src/app/embedded/api/api-list.component.spec.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { ApiListComponent } from './api-list.component';
 import { ApiItem, ApiSection, ApiService } from './api.service';
 import { LocationService } from 'app/shared/location.service';
+import { SharedModule } from 'app/shared/shared.module';
 
 describe('ApiListComponent', () => {
   let component: ApiListComponent;
@@ -12,6 +13,7 @@ describe('ApiListComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [ SharedModule ],
       declarations: [ ApiListComponent ],
       providers: [
         { provide: ApiService, useClass: TestApiService },
@@ -75,17 +77,17 @@ describe('ApiListComponent', () => {
     });
 
     it('item.show should be true for items with selected status', () => {
-      component.setStatus({name: 'stable', title: 'Stable'});
+      component.setStatus({value: 'stable', title: 'Stable'});
       expectFilteredResult('status: stable', item => item.stability === 'stable');
     });
 
     it('item.show should be true for items with "security-risk" status when selected', () => {
-      component.setStatus({name: 'security-risk', title: 'Security Risk'});
+      component.setStatus({value: 'security-risk', title: 'Security Risk'});
       expectFilteredResult('status: security-risk', item => item.securityRisk);
     });
 
     it('item.show should be true for items of selected type', () => {
-      component.setType({name: 'class', title: 'Class'});
+      component.setType({value: 'class', title: 'Class'});
       expectFilteredResult('type: class', item => item.docType === 'class');
     });
 
@@ -189,8 +191,8 @@ describe('ApiListComponent', () => {
 
     it('should have query, status, and type', () => {
       component.setQuery('foo');
-      component.setStatus({name: 'stable', title: 'Stable'});
-      component.setType({name: 'class', title: 'Class'});
+      component.setStatus({value: 'stable', title: 'Stable'});
+      component.setType({value: 'class', title: 'Class'});
 
       const search = locationService.setSearch.calls.mostRecent().args[1];
       expect(search.query).toBe('foo');

aio/src/app/embedded/api/api-list.component.ts

@@ -15,10 +15,7 @@ import { combineLatest } from 'rxjs/observable/combineLatest';
 import { LocationService } from 'app/shared/location.service';
 import { ApiItem, ApiSection, ApiService } from './api.service';
 
-interface MenuItem {
-  name: string;
-  title: string;
-}
+import { Option } from 'app/shared/select/select.component';
 
 class SearchCriteria {
   query? = '';
@@ -40,29 +37,29 @@ export class ApiListComponent implements OnInit {
   private criteriaSubject = new ReplaySubject<SearchCriteria>(1);
   private searchCriteria = new SearchCriteria();
 
-  status: MenuItem;
-  type: MenuItem;
+  status: Option;
+  type: Option;
 
   // API types
-  types: MenuItem[] = [
-    { name: 'all', title: 'All' },
-    { name: 'directive', title: 'Directive' },
-    { name: 'pipe', title: 'Pipe'},
-    { name: 'decorator', title: 'Decorator' },
-    { name: 'class', title: 'Class' },
-    { name: 'interface', title: 'Interface' },
-    { name: 'function', title: 'Function' },
-    { name: 'enum', title: 'Enum' },
-    { name: 'type-alias', title: 'Type Alias' },
-    { name: 'const', title: 'Const'}
+  types: Option[] = [
+    { value: 'all', title: 'All' },
+    { value: 'directive', title: 'Directive' },
+    { value: 'pipe', title: 'Pipe'},
+    { value: 'decorator', title: 'Decorator' },
+    { value: 'class', title: 'Class' },
+    { value: 'interface', title: 'Interface' },
+    { value: 'function', title: 'Function' },
+    { value: 'enum', title: 'Enum' },
+    { value: 'type-alias', title: 'Type Alias' },
+    { value: 'const', title: 'Const'}
   ];
 
-  statuses: MenuItem[] = [
-    { name: 'all', title: 'All' },
-    { name: 'stable', title: 'Stable' },
-    { name: 'deprecated', title: 'Deprecated' },
-    { name: 'experimental', title: 'Experimental' },
-    { name: 'security-risk', title: 'Security Risk' }
+  statuses: Option[] = [
+    { value: 'all', title: 'All' },
+    { value: 'stable', title: 'Stable' },
+    { value: 'deprecated', title: 'Deprecated' },
+    { value: 'experimental', title: 'Experimental' },
+    { value: 'security-risk', title: 'Security Risk' }
   ];
 
   @ViewChild('filter') queryEl: ElementRef;
@@ -90,16 +87,16 @@ export class ApiListComponent implements OnInit {
     this.setSearchCriteria({query: (query || '').toLowerCase().trim() });
   }
 
-  setStatus(status: MenuItem) {
+  setStatus(status: Option) {
     this.toggleStatusMenu();
     this.status = status;
-    this.setSearchCriteria({status: status.name});
+    this.setSearchCriteria({status: status.value});
   }
 
-  setType(type: MenuItem) {
+  setType(type: Option) {
     this.toggleTypeMenu();
     this.type = type;
-    this.setSearchCriteria({type: type.name});
+    this.setSearchCriteria({type: type.value});
   }
 
   toggleStatusMenu() {
@@ -150,13 +147,13 @@ export class ApiListComponent implements OnInit {
     // Hack: can't bind to query because input cursor always forced to end-of-line.
     this.queryEl.nativeElement.value = q;
 
-    this.status = this.statuses.find(x => x.name === status) || this.statuses[0];
-    this.type = this.types.find(x => x.name === type) || this.types[0];
+    this.status = this.statuses.find(x => x.value === status) || this.statuses[0];
+    this.type = this.types.find(x => x.value === type) || this.types[0];
 
     this.searchCriteria = {
       query: q,
-      status: this.status.name,
-      type: this.type.name
+      status: this.status.value,
+      type: this.type.value
     };
 
     this.criteriaSubject.next(this.searchCriteria);