feat(autocomplete): implement autocomplete hint (#158)

Closes #154

projects/angular-showcase/src/app/public/examples/autocomplete-showcase/autocomplete-showcase.component.html

@@ -16,7 +16,28 @@ <h4 class="sbbsc-block">Basic Example</h4>
 
   <div class="row">
     <div class="col-lg-6 sbbsc-v-sep">
-      <h4 class="sbbsc-block">Basic Example</h4>
+      <h4 class="sbbsc-block">Example Autocomplete Hint</h4>
+      <input type="text" [formControl]="myControlHint" [sbbAutocomplete]="autoHint" />
+      <sbb-autocomplete #autoHint="sbbAutocomplete">
+        <sbb-option
+          [value]="option"
+          *ngFor="let option of filteredOptionsHint | slice: 0:maxOptionsListLength"
+        >
+          {{ option }}
+        </sbb-option>
+        <sbb-autocomplete-hint *ngIf="filteredOptionsHint.length > maxOptionsListLength">
+          {{ filteredOptionsHint.length - maxOptionsListLength }} further hits found
+        </sbb-autocomplete-hint>
+      </sbb-autocomplete>
+      <pre>{{ myControlHint.value | json }}</pre>
+    </div>
+  </div>
+
+  <div role="presentation" class="sbbsc-separator"></div>
+
+  <div class="row">
+    <div class="col-lg-6 sbbsc-v-sep">
+      <h4 class="sbbsc-block">Example Option Group</h4>
       <input type="text" [formControl]="myControlStatic" [sbbAutocomplete]="autoStatic" />
       <sbb-autocomplete #autoStatic="sbbAutocomplete">
         <sbb-option *ngFor="let option of options$ | async" [value]="option">

projects/angular-showcase/src/app/public/examples/autocomplete-showcase/autocomplete-showcase.component.ts

@@ -1,19 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 @Component({
   selector: 'sbb-autocomplete-showcase',
   templateUrl: './autocomplete-showcase.component.html',
   styleUrls: ['./autocomplete-showcase.component.scss']
 })
 export class AutocompleteShowcaseComponent implements OnInit {
+  readonly maxOptionsListLength = 5;
+
   myControl = new FormControl('');
+  myControlHint = new FormControl('');
   myControlStatic = new FormControl('');
 
   options$: Subject<string[]>;
-  searchNumbers: Subject<string>;
 
   options: string[] = [
     'Eins',
@@ -29,6 +31,7 @@ export class AutocompleteShowcaseComponent implements OnInit {
   ];
   filter: '';
   filteredOptions = this.options.slice(0);
+  filteredOptionsHint = this.options.slice(0);
   staticOptions: string[] = ['statische Option eins', 'statische Option zwei'];
 
   ngOnInit() {
@@ -38,6 +41,12 @@ export class AutocompleteShowcaseComponent implements OnInit {
       );
     });
 
+    this.myControlHint.valueChanges.pipe(distinctUntilChanged()).subscribe(newValue => {
+      this.filteredOptionsHint = this.options.filter(
+        option => option.toLocaleLowerCase().indexOf(newValue.toLocaleLowerCase()) > -1
+      );
+    });
+
     this.options$ = new Subject<string[]>();
 
     this.myControlStatic.valueChanges

projects/sbb-esta/angular-public/autocomplete/autocomplete.md

@@ -132,6 +132,23 @@ autocomplete is attached to using the `sbbAutocompleteOrigin` directive together
 </sbb-autocomplete>
 ```
 
+### Autocomplete hint
+
+`sbb-autocomplete-hint` can be used to add additional information in option list:
+
+<!-- example(autocomplete-hint) -->
+
+```html
+<sbb-autocomplete #autoHint="sbbAutocomplete">
+  <sbb-option *ngFor="let option of filteredOptions" [value]="option">
+    {{ option.name }}
+  </sbb-option>
+  <sbb-autocomplete-hint>
+    {{ remainingOptionsCount }} further results found
+  </sbb-autocomplete-hint>
+</sbb-autocomplete>
+```
+
 ### Accessibility
 
 The input for an autocomplete without text or labels should be given a meaningful label via

projects/sbb-esta/angular-public/autocomplete/src/autocomplete-hint/autocomplete-hint.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

projects/sbb-esta/angular-public/autocomplete/src/autocomplete-hint/autocomplete-hint.component.scss

@@ -0,0 +1,23 @@
+@import '../styles/autocomplete';
+
+:host {
+  padding-left: $autocompletePaddingX;
+  padding-right: $autocompletePaddingX;
+  padding-bottom: $autocompletePaddingTop;
+
+  @include publicOnly() {
+    @include mq($from: desktop4k) {
+      font-size: toPx(10 * $scalingFactor4k);
+      padding-top: toPx($autocompletePaddingTop * $scalingFactor4k);
+      padding-bottom: toPx($autocompletePaddingTop * $scalingFactor4k);
+    }
+
+    @include mq($from: desktop5k) {
+      font-size: toPx(10 * $scalingFactor5k);
+      padding-top: toPx($autocompletePaddingTop * $scalingFactor5k);
+      padding-bottom: toPx($autocompletePaddingTop * $scalingFactor5k);
+    }
+  }
+
+  @include label;
+}

projects/sbb-esta/angular-public/autocomplete/src/autocomplete-hint/autocomplete-hint.component.ts

@@ -0,0 +1,18 @@
+import { Component, HostBinding } from '@angular/core';
+
+/**
+ * Autocomplete-hint IDs need to be unique across components, so this counter exists outside of
+ * the component definition.
+ */
+let nextId = 0;
+
+@Component({
+  selector: 'sbb-autocomplete-hint',
+  templateUrl: './autocomplete-hint.component.html',
+  styleUrls: ['./autocomplete-hint.component.scss']
+})
+export class AutocompleteHintComponent {
+  /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
+  @HostBinding('attr.id')
+  id = `sbb-autocomplete-hint-${nextId++}`;
+}

projects/sbb-esta/angular-public/autocomplete/src/autocomplete.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { OptionModule } from '@sbb-esta/angular-public/option';
 
+import { AutocompleteHintComponent } from './autocomplete-hint/autocomplete-hint.component';
 import { AutocompleteOriginDirective } from './autocomplete/autocomplete-origin.directive';
 import {
   AutocompleteTriggerDirective,
@@ -13,13 +14,19 @@ import { AutocompleteComponent } from './autocomplete/autocomplete.component';
 
 @NgModule({
   imports: [OptionModule, CommonModule, A11yModule, OverlayModule],
-  declarations: [AutocompleteComponent, AutocompleteOriginDirective, AutocompleteTriggerDirective],
+  declarations: [
+    AutocompleteComponent,
+    AutocompleteOriginDirective,
+    AutocompleteTriggerDirective,
+    AutocompleteHintComponent
+  ],
   exports: [
     OptionModule,
     OverlayModule,
     AutocompleteComponent,
     AutocompleteOriginDirective,
-    AutocompleteTriggerDirective
+    AutocompleteTriggerDirective,
+    AutocompleteHintComponent
   ],
   providers: [SBB_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER]
 })

projects/sbb-esta/angular-public/autocomplete/src/public_api.ts

@@ -1,4 +1,5 @@
 export * from './autocomplete.module';
 export * from './autocomplete/autocomplete.component';
+export * from './autocomplete-hint/autocomplete-hint.component';
 export * from './autocomplete/autocomplete-origin.directive';
 export * from './autocomplete/autocomplete-trigger.directive';