feat(typeahead): add sort functionality to typeahead

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

@@ -23,6 +23,7 @@ import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
 import { DemotypeaheadSelectFirstItemComponent } from './selected-first-item/selected-first-item';
 import { DemoTypeaheadShowOnBlurComponent } from './show-on-blur/show-on-blur';
 import { DemoTypeaheadSingleWorldComponent } from './single-world/single-world';
+import { DemoTypeaheadOrderingComponent } from './ordering/ordering';
 
 export const DEMO_COMPONENTS = [
   DemoTypeaheadAdaptivePositionComponent,
@@ -51,5 +52,6 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadScrollableComponent,
   DemotypeaheadSelectFirstItemComponent,
   DemoTypeaheadShowOnBlurComponent,
-  DemoTypeaheadSingleWorldComponent
+  DemoTypeaheadSingleWorldComponent,
+  DemoTypeaheadOrderingComponent
 ];

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

@@ -0,0 +1,40 @@
+<div class="mb-3">
+  <h6>Source - <strong>array of string</strong>. Order direction - <strong>descending</strong></h6>
+  <input [(ngModel)]="selected1"
+         [typeahead]="states"
+         [typeaheadOrderBy]="sortConfig1"
+         class="form-control">
+</div>
+  <div class="mb-3">
+  <h6>Source - <strong>array of string</strong>. Order direction - <strong>ascending</strong></h6>
+  <input [(ngModel)]="selected2"
+         [typeahead]="states"
+         [typeaheadOrderBy]="sortConfig2"
+         class="form-control">
+</div>
+<div class="mb-3">
+  <h6>
+    Source - <strong>array of objects</strong>. Order direction - <strong>ascending</strong>,
+    sort by <strong>city</strong>, group by <strong>state</strong>
+  </h6>
+  <input [(ngModel)]="selected3"
+         [typeahead]="cities"
+         typeaheadOptionField="city"
+         typeaheadGroupField="state"
+         [typeaheadItemTemplate]="customItemTemplate"
+         [typeaheadOrderBy]="sortConfig3"
+         class="form-control">
+
+  <ng-template #customItemTemplate let-model="item">
+    <span><strong>{{model.city}}</strong> - {{model.code}}</span>
+  </ng-template>
+</div>
+
+<div class="mb-3">
+  <h6>Source - <strong>Observable of array of string</strong>. Order direction - <strong>descending</strong></h6>
+  <input [(ngModel)]="selected4"
+         [typeahead]="states$"
+         [typeaheadAsync]="true"
+         [typeaheadOrderBy]="sortConfig1"
+         class="form-control">
+</div>

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

@@ -0,0 +1,136 @@
+import { Component, OnInit } from '@angular/core';
+
+import { TypeaheadOrder } from 'ngx-bootstrap/typeahead';
+import { Observable, of, Subscriber } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+@Component({
+  selector: 'demo-typeahead-ordering',
+  templateUrl: './ordering.html'
+})
+export class DemoTypeaheadOrderingComponent implements OnInit {
+  selected1: string;
+  selected2: string;
+  selected3: string;
+  selected4: string;
+  sortConfig1: TypeaheadOrder = {
+    direction: 'desc'
+  };
+  sortConfig2: TypeaheadOrder = {
+    direction: 'asc'
+  };
+  sortConfig3: TypeaheadOrder = {
+    direction: 'asc',
+    field: 'city'
+  };
+  states$: Observable<string[]>;
+  states: string[] = [
+    'New Mexico',
+    'New York',
+    'North Dakota',
+    'North Carolina',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Alaska',
+    'Alabama',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming'
+  ];
+  cities = [{
+    city: 'Norton',
+    state: 'Virginia',
+    code: '61523'
+  }, {
+    city: 'Grundy',
+    state: 'Virginia',
+    code: '77054'
+  }, {
+    city: 'Coeburn',
+    state: 'Virginia',
+    code: '01665'
+  }, {
+    city: 'Phoenix',
+    state: 'Arizona',
+    code: '29128'
+  }, {
+    city: 'Tucson',
+    state: 'Arizona',
+    code: '32084'
+  }, {
+    city: 'Mesa',
+    state: 'Arizona',
+    code: '21465'
+  }, {
+    city: 'Independence',
+    state: 'Missouri',
+    code: '26887'
+  }, {
+    city: 'Kansas City',
+    state: 'Missouri',
+    code: '79286'
+  }, {
+    city: 'Springfield',
+    state: 'Missouri',
+    code: '92325'
+  }, {
+    city: 'St. Louis',
+    state: 'Missouri',
+    code: '64891'
+  }];
+
+  ngOnInit(): void {
+    this.states$ = new Observable((observer: Subscriber<string>) => {
+      // Runs on every search
+      observer.next(this.selected4);
+    })
+      .pipe(
+        switchMap((token: string) => {
+          const query = new RegExp(token, 'i');
+
+          return of(
+            this.states.filter((state: string) => query.test(state))
+          );
+        })
+      );
+  }
+}

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

@@ -29,6 +29,7 @@ import { ExamplesComponent } from '../../docs/demo-section-components/demo-examp
 
 import { NgApiDocComponent, NgApiDocConfigComponent } from '../../docs/api-docs';
 import { DemoTypeaheadFirstItemActiveComponent } from './demos/first-item-active/first-item-active';
+import { DemoTypeaheadOrderingComponent } from './demos/ordering/ordering';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -275,6 +276,16 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader!./demos/selected-first-item/selected-first-item.ts'),
         html: require('!!raw-loader!./demos/selected-first-item/selected-first-item.html'),
         outlet: DemotypeaheadSelectFirstItemComponent
+      },
+      {
+        title: 'Order results',
+        anchor: 'typeahead-ordering',
+        description: `
+          <p>Use <code>typeaheadOrderBy</code> property to order your result by a certain field and in certain direction</p>
+        `,
+        component: require('!!raw-loader!./demos/ordering/ordering.ts'),
+        html: require('!!raw-loader!./demos/ordering/ordering.html'),
+        outlet: DemoTypeaheadOrderingComponent
       }
     ]
   },

demo/src/ng-api-doc.ts

@@ -2332,6 +2332,16 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>Toggle animation</p>\n"
       },
+      {
+        "name": "ariaDescribedby",
+        "type": "string",
+        "description": "<p>aria-describedby attribute value to set on the modal window</p>\n"
+      },
+      {
+        "name": "ariaLabelledBy",
+        "type": "string",
+        "description": "<p>aria-labelledby attribute value to set on the modal window</p>\n"
+      },
       {
         "name": "backdrop",
         "type": "boolean | \"static\"",
@@ -3915,6 +3925,11 @@ export const ngdoc: any = {
         "type": "number",
         "description": "<p>maximum length of options items list. The default value is 20</p>\n"
       },
+      {
+        "name": "typeaheadOrderBy",
+        "type": "TypeaheadOrder",
+        "description": "<p>Used to specify a custom order of matches. When options source is an array of objects\na field for sorting has to be set up. In case of options source is an array of string,\na field for sorting is absent. The ordering direction could be changed to ascending or descending.</p>\n"
+      },
       {
         "name": "typeaheadPhraseDelimiters",
         "defaultValue": "'\"",

src/index.ts

@@ -141,7 +141,8 @@ export {
   TypeaheadContainerComponent,
   TypeaheadDirective,
   TypeaheadMatch,
-  TypeaheadModule
+  TypeaheadModule,
+  TypeaheadOrder
 } from './typeahead/index';
 
 export {