feat(typeahead): add dropup option (#2390)

demo/src/app/components/+typeahead/demos/dropup/dropup.html

@@ -0,0 +1,5 @@
+<pre class="card card-block card-header">Model: {{selected | json}}</pre>
+<input [(ngModel)]="selected"
+       [typeahead]="states"
+       [dropup]="true"
+       class="form-control">

demo/src/app/components/+typeahead/demos/dropup/dropup.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-typeahead-dropup',
+  templateUrl: './dropup.html'
+})
+export class DemoTypeaheadDropupComponent {
+  public selected:string;
+  public states:string[] = ['Alabama', 'Alaska', 'Arizona', 'Arkansas',
+    'California', 'Colorado',
+    'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho',
+    'Illinois', 'Indiana', 'Iowa',
+    'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts',
+    'Michigan', 'Minnesota',
+    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
+    'New Jersey', 'New Mexico',
+    'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon',
+    'Pennsylvania', 'Rhode Island',
+    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
+    'Virginia', 'Washington',
+    'West Virginia', 'Wisconsin', 'Wyoming'];
+}

demo/src/app/components/+typeahead/demos/index.ts

@@ -4,14 +4,16 @@ import { DemoTypeaheadFieldComponent } from './field/field';
 import { DemoTypeaheadAsyncComponent } from './async/async';
 import { DemoTypeaheadFormsComponent } from './in-form/in-form';
 import { DemoTypeaheadGroupingComponent } from './grouping/grouping';
+import { DemoTypeaheadDropupComponent } from './dropup/dropup';
 
 export const DEMO_COMPONENTS = [
   DemoTypeaheadStaticComponent,
   DemoTypeaheadItemTemplateComponent,
   DemoTypeaheadFieldComponent,
   DemoTypeaheadAsyncComponent,
   DemoTypeaheadFormsComponent,
-  DemoTypeaheadGroupingComponent
+  DemoTypeaheadGroupingComponent,
+  DemoTypeaheadDropupComponent
 ];
 
 export const DEMOS = {
@@ -38,5 +40,9 @@ export const DEMOS = {
   grouping: {
     component: require('!!raw-loader?lang=typescript!./grouping/grouping.ts'),
     html: require('!!raw-loader?lang=markup!./grouping/grouping.html')
+  },
+  dropup: {
+    component: require('!!raw-loader?lang=typescript!./dropup/dropup.ts'),
+    html: require('!!raw-loader?lang=markup!./dropup/dropup.html')
   }
 };

demo/src/app/components/+typeahead/demos/static/static.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import 'rxjs/add/observable/of';
 
 @Component({
   selector: 'demo-typeahead-static',

demo/src/app/components/+typeahead/typeahead-section.component.ts

@@ -12,7 +12,13 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
     <li><a routerLink="." fragment="usage">Usage</a></li>
     <li><a routerLink="." fragment="examples">Examples</a>
       <ul>
-        <!--<li><a routerLink="." fragment="link-color">Link color</a></li>-->
+        <li><a routerLink="." fragment="static">Static array</a></li>
+        <li><a routerLink="." fragment="item-template">Item template</a></li>
+        <li><a routerLink="." fragment="option-field">Option field</a></li>
+        <li><a routerLink="." fragment="async">Async data</a></li>
+        <li><a routerLink="." fragment="forms">Reactive forms</a></li>
+        <li><a routerLink="." fragment="grouping-results">Grouping results</a></li>
+        <li><a routerLink="." fragment="dropup">Dropup</a></li>
       </ul>
     </li>
     <li><a routerLink="." fragment="api-reference">API Reference</a>
@@ -63,6 +69,12 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   <ng-sample-box [ts]="demos.grouping.component" [html]="demos.grouping.html">
     <demo-typeahead-grouping></demo-typeahead-grouping>
   </ng-sample-box>
+
+  <!-- Dropup -->
+  <h2 routerLink="." fragment="dropup" id="dropup">Dropup</h2>
+  <ng-sample-box [ts]="demos.dropup.component" [html]="demos.dropup.html">
+    <demo-typeahead-dropup></demo-typeahead-dropup>
+  </ng-sample-box>
   
   <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
   <ng-api-doc id="typeahead-directive" directive="TypeaheadDirective"></ng-api-doc>

demo/src/ng-api-doc.ts

@@ -2647,6 +2647,12 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>A selector specifying the element the typeahead should be appended to.\nCurrently only supports &quot;body&quot;.</p>\n"
       },
+      {
+        "name": "dropup",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>This attribute indicates that the dropdown should be opened upwards </p>\n"
+      },
       {
         "name": "optionsListTemplate",
         "type": "TemplateRef<any>",

src/typeahead/typeahead-container.component.ts

@@ -53,6 +53,7 @@ import { latinize } from './typeahead-utils';
   host: {
     'class': 'dropdown open',
     '[class.dropdown-menu]':'isBs4',
+    '[class.dropup]':'dropup',
     style: 'position: absolute;display: block;'
   },
   // tslint: enable
@@ -67,6 +68,7 @@ export class TypeaheadContainerComponent {
   public left: string;
   public display: string;
   public placement: string;
+  public dropup: boolean;
 
   public get isBs4():boolean {
     return !isBs3();

src/typeahead/typeahead.directive.ts

@@ -60,6 +60,9 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
    */
   @Input() public container: string;
 
+  /** This attribute indicates that the dropdown should be opened upwards */
+  @Input() public dropup: boolean = false;
+
   // not yet implemented
   /** if false restrict model values to the ones selected from the popup only will be provided */
   // @Input() protected typeaheadEditable:boolean;
@@ -214,11 +217,12 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
       .attach(TypeaheadContainerComponent)
       // todo: add append to body, after updating positioning service
       .to(this.container)
-      .position({attachment: 'bottom left'})
+      .position({attachment: `${this.dropup ? 'top' : 'bottom'} left`})
       .show({
         typeaheadRef: this,
         placement: this.placement,
-        animation: false
+        animation: false,
+        dropup: this.dropup
       });
 
     this._container = this._typeahead.instance;