Merge pull request #749 from mobi/feature_select_typeahead_enhancements

[Feature] Select Typeahead Enhancements

projects/go-lib/src/lib/components/go-select/go-select.component.html

@@ -18,21 +18,24 @@
   [labelForId]="id"
   [loading]="loading"
   [multiple]="multiple"
+  [ngClass]="{
+    'go-select--dark': theme === 'dark',
+    'go-select--hide-arrow': hideDropDownArrow || (typeahead && items?.length === 0),
+    'go-select--hide-dropdown': searchable && items?.length === 0
+  }"
   [placeholder]="placeholder"
-  [typeahead]="typeahead"
-  [ngClass]="{'go-select--dark': theme === 'dark'}"
   [searchable]="searchable"
+  [typeahead]="typeahead"
   [typeToSearchText]="typeToSearchText"
   [virtualScroll]="virtualScroll"
   (scrollToEnd)="onScrollToEnd()"
   (scroll)="onScroll($event)">
-  <ng-container *ngIf="multiple && showSelectAll">
+  <ng-container *ngIf="multiple && showSelectAll && items.length > 0">
     <ng-template ng-header-tmp>
       <button
         (click)="onSelectAll()"
         class="go-select__select-all-button"
         [ngClass]="{ 'go-select__select-all-button--dark' : theme === 'dark' }">
-
         Select All
       </button>
     </ng-template>
@@ -57,14 +60,18 @@
   </ng-container>
 </ng-select>
 
-<go-hint *ngFor="let hint of hints" [message]="hint" [theme]="theme"></go-hint>
+<go-hint
+  *ngFor="let hint of hints"
+  [message]="hint"
+  [theme]="theme">
+</go-hint>
 
 <div *ngIf="control?.errors?.length">
   <go-hint
     *ngFor="let error of control.errors"
     [message]="error.message"
     [label]="error.type"
     [theme]="theme"
-    type="negative"
-  ></go-hint>
+    type="negative">
+  </go-hint>
 </div>

projects/go-lib/src/lib/components/go-select/go-select.component.scss

@@ -242,4 +242,16 @@ body > .ng-dropdown-panel {
       }
     }
   }
+
+  &--hide-arrow {
+    .ng-arrow-wrapper {
+      display: none;
+    }
+  }
+
+  &--hide-dropdown {
+    .ng-dropdown-panel {
+      display: none;
+    }
+  }
 }

projects/go-lib/src/lib/components/go-select/go-select.component.ts

@@ -21,6 +21,10 @@ export class GoSelectComponent implements OnInit {
    * A property on each item to group by
    */
   @Input() groupBy: string = null;
+  /**
+   * If true, hides drop down arrow on select
+   */
+  @Input() hideDropDownArrow: boolean = false;
   @Input() hints: string[];
   @Input() items: any[];
   @Input() key: string;
@@ -30,10 +34,11 @@ export class GoSelectComponent implements OnInit {
   @Input() placeholder: string;
   @Input() searchable: boolean = true;
   @Input() showSelectAll: boolean = true;
+  @Input() theme: 'light' | 'dark' = 'light';
   @Input() typeahead?: Subject<string>;
   @Input() typeToSearchText: string = 'Type to Search';
-  @Input() theme: 'light' | 'dark' = 'light';
   @Input() virtualScroll: boolean = false;
+
   @Output() scrollToEnd: EventEmitter<any> = new EventEmitter<any>();
   @Output() scroll: EventEmitter<{ start: number, end: number }> = new EventEmitter<{ start: number; end: number }>();
 

projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html

@@ -569,12 +569,12 @@ <h4 class="go-heading-4 go-heading--underlined">View</h4>
             <go-select
               bindLabel="name"
               bindValue="value"
+              label="Candy"
+              placeholder="Search for a candy"
               [control]="select11"
               [items]="options$ | async"
-              [multiple]="true"
-              label="Your Input"
-              [typeahead]="itemInput"
-              typeToSearchText="Search The Thing">
+              [loading]="loadingTypeahead"
+              [typeahead]="itemInput">
             </go-select>
           </div>
           <div class="go-column go-column--50">
@@ -723,6 +723,46 @@ <h4 class="go-heading-4 go-heading--underlined">Code</h4>
     </div>
   </go-card>
 
+  <go-card id="form-select-hideDropDownArrow" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Component hideDropDownArrow</h2>
+      <go-copy cardId="form-select-hideDropDownArrow" goCopyCardLink></go-copy>
+    </ng-container>
+    <div class="go-container" go-card-content>
+
+      <div class="go-column go-column--100">
+        <p class="go-body-copy go-body-copy--no-margin">
+          The <code class="code-block--inline">@Input() hideDropDownArrow: boolean = false;</code> binding can be used
+          to forcefully hide the drown down arrow in the select.
+        </p>
+      </div>
+
+      <div class="go-column go-column--100 go-column--no-padding">
+        <div class="go-container">
+          <div class="go-column go-column--50">
+            <h4 class="go-heading-4 go-heading--underlined">View</h4>
+            <go-select
+              bindLabel="name"
+              bindValue="value"
+              [hideDropDownArrow]="true"
+              [control]="select22"
+              [items]="items"
+              label="Select an option">
+            </go-select>
+          </div>
+          <div class="go-column go-column--50">
+            <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+            <code
+              [highlight]="select22Code"
+              class="code-block--no-bottom-margin">
+            </code>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </go-card>
+
   <go-card id="form-select-template" class="go-column go-column--100">
     <ng-container go-card-header>
       <h2 class="go-heading-2 go-heading--no-wrap">Component Template</h2>

projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts

@@ -2,15 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { GoModalService, GoSelectComponent } from '../../../../../../../../../go-lib/src/public_api';
 import { SubNavService } from '../../../../../../shared/components/sub-nav/sub-nav.service';
-import { debounceTime, map } from 'rxjs/operators';
-import { concat, of, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
+import { concat, Observable, of, Subject } from 'rxjs';
 
 @Component({
   templateUrl: './select-docs.component.html'
 })
 export class SelectDocsComponent implements OnInit {
   itemInput: Subject<string> = new Subject<string>();
-  options$: any;
+  options$: Observable<any>;
 
   items: any = [
     { value: 1, name: 'Reeses' },
@@ -157,10 +157,12 @@ export class SelectDocsComponent implements OnInit {
   select19: FormControl = new FormControl({ value: '', disabled: true });
   select20: FormControl = new FormControl();
   select21: FormControl = new FormControl();
+  select22: FormControl = new FormControl();
 
   hints: Array<string> = ['please select you favorite candy'];
 
   loadingSelectOptions: boolean = true;
+  loadingTypeahead: boolean = false;
 
   select1Code: string = `
   <go-select
@@ -296,24 +298,31 @@ export class SelectDocsComponent implements OnInit {
   <go-select
     bindLabel="name"
     bindValue="value"
-    [control]="select"
+    label="Candy"
+    placeholder="Search for a candy"
+    [control]="select11"
     [items]="options$ | async"
-    [multiple]="true"
-    label="Your Input"
-    [typeahead]="itemInput"
-    typeToSearchText="Search The Thing">
+    [loading]="loadingTypeahead"
+    [typeahead]="itemInput">
   </go-select>
   `;
 
   select11ComponentCode: string = `
   itemInput: Subject<string> = new Subject<string>();
-  options$: any;
+  options$:  Observable<any[]>; // replace 'any' with correct type
 
   this.options$ = concat(
     of([]),
     this.itemInput.pipe(
-      debounceTime(600), // Delay user input
-      map((input) => [input])
+      distinctUntilChanged(), // only proceed if value is distinctly different than previous
+      debounceTime(500), // only proceed after waiting .5s for further user input
+      tap(() =>  this.loadingTypeahead = true), // initiate loading state
+      switchMap((input: string) => {
+        return this.yourService.getItems(input).pipe(
+          catchError(() => of([])), // catch error and set items to empty array
+          tap(() => this.loadingTypeahead = false) // turn loading off
+        )
+      })
     )
   );
   `;
@@ -469,16 +478,16 @@ export class SelectDocsComponent implements OnInit {
   `;
 
   select21Code: string = `
- <go-select
-   [items]="selectData"
-   [control]="select"
-   bindValue="value"
-   bindLabel="name"
-   [hints]="['Scroll to end for loading more data']"
-   label="Select an Option"
-   (scrollToEnd)="scrollToEnd()"
-   (scroll)="scroll($event)"
-   [virtualScroll]="true">
+  <go-select
+    [items]="selectData"
+    [control]="select"
+    bindValue="value"
+    bindLabel="name"
+    [hints]="['Scroll to end for loading more data']"
+    label="Select an Option"
+    (scrollToEnd)="scrollToEnd()"
+    (scroll)="scroll($event)"
+    [virtualScroll]="true">
   </go-select>
   `;
 
@@ -488,10 +497,21 @@ export class SelectDocsComponent implements OnInit {
   }
 
   scroll($event: { start: number; end: number }): void {
-  // Code here
+    // Code here
   }
   `;
 
+  select22Code: string = `
+  <go-select
+    bindLabel="name"
+    bindValue="value"
+    [hideDropDownArrow]="true"
+    [control]="select22"
+    [items]="items"
+    label="Select an option">
+  </go-select>
+  `;
+
   basicDisabledExample: string = `
   <go-select
     [control]="select"
@@ -540,8 +560,21 @@ export class SelectDocsComponent implements OnInit {
     this.options$ = concat(
       of([]),
       this.itemInput.pipe(
-        debounceTime(600), // Delay user input
-        map((input: string) => [input])
+        distinctUntilChanged(),
+        debounceTime(500),
+        tap(() =>  this.loadingTypeahead = true),
+        switchMap((input: string) => {
+          let result: Observable<any> = of([]);
+
+          if (input) {
+            result = of(this.items.filter((val: any) => {
+              return val.name.toLowerCase().includes(input.toLowerCase());
+            }));
+          }
+
+          this.loadingTypeahead = false;
+          return result;
+        })
       )
     );
   }