docs(typehead): add demo for typeaheadOnSelect output valor-software#…

…3681

Add demo for typeaheadOnSelect output

Close valor-software#3681

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

@@ -1,9 +1,8 @@
-  <pre class="card card-block card-header">Model: {{asyncSelected | json}}</pre>
+  <pre class="card card-block card-header mb-3">Model: {{asyncSelected | json}}</pre>
   <input [(ngModel)]="asyncSelected"
          [typeahead]="dataSource"
          (typeaheadLoading)="changeTypeaheadLoading($event)"
          (typeaheadNoResults)="changeTypeaheadNoResults($event)"
-         (typeaheadOnSelect)="typeaheadOnSelect($event)"
          [typeaheadOptionsLimit]="7"
          typeaheadOptionField="name"
          placeholder="Locations loaded with timeout"

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

@@ -16,11 +16,7 @@ export class DemoTypeaheadAsyncComponent {
   statesComplex: any[] = [
     { id: 1, name: 'Alabama', region: 'South' },
     { id: 2, name: 'Alaska', region: 'West' },
-    {
-      id: 3,
-      name: 'Arizona',
-      region: 'West'
-    },
+    { id: 3, name: 'Arizona', region: 'West' },
     { id: 4, name: 'Arkansas', region: 'South' },
     { id: 5, name: 'California', region: 'West' },
     { id: 6, name: 'Colorado', region: 'West' },
@@ -94,8 +90,4 @@ export class DemoTypeaheadAsyncComponent {
   changeTypeaheadNoResults(e: boolean): void {
     this.typeaheadNoResults = e;
   }
-
-  typeaheadOnSelect(e: TypeaheadMatch): void {
-    console.log('Selected value: ', e.value);
-  }
 }

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

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

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

@@ -1,4 +1,4 @@
-<pre class="card card-block card-header">Model: {{customSelected | json}}</pre>
+<pre class="card card-block card-header mb-3">Model: {{customSelected | json}}</pre>
 <input [(ngModel)]="customSelected"
        [typeahead]="statesComplex"
        typeaheadOptionField="name"

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

@@ -1,4 +1,4 @@
-<pre class="card card-block card-header">Model: {{groupSelected | json}}</pre>
+<pre class="card card-block card-header mb-3">Model: {{groupSelected | json}}</pre>
 <input [(ngModel)]="groupSelected"
        [typeahead]="statesComplex"
        typeaheadOptionField="name"

demo/src/app/components/+typeahead/demos/in-form/in-form.html

@@ -1,5 +1,5 @@
 <!--Typeahead inside a form-->
-<pre class="card card-block card-header">Model: {{myForm.value.state | json}}</pre>
+<pre class="card card-block card-header mb-3">Model: {{myForm.value.state | json}}</pre>
 <form [formGroup]="myForm">
   <input formControlName="state"
          [typeahead]="states"

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

@@ -6,6 +6,7 @@ import { DemoTypeaheadFormsComponent } from './in-form/in-form';
 import { DemoTypeaheadGroupingComponent } from './grouping/grouping';
 import { DemoTypeaheadDropupComponent } from './dropup/dropup';
 import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
+import { DemoTypeaheadOnSelectComponent } from './on-select/on-select';
 
 export const DEMO_COMPONENTS = [
   DemoTypeaheadStaticComponent,
@@ -15,7 +16,8 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadFormsComponent,
   DemoTypeaheadGroupingComponent,
   DemoTypeaheadDropupComponent,
-  DemoTypeaheadScrollableComponent
+  DemoTypeaheadScrollableComponent,
+  DemoTypeaheadOnSelectComponent
 ];
 
 export const DEMOS = {
@@ -50,5 +52,9 @@ export const DEMOS = {
   scrollable: {
     component: require('!!raw-loader?lang=typescript!./scrollable/scrollable.ts'),
     html: require('!!raw-loader?lang=markup!./scrollable/scrollable.html')
+  },
+  onSelect: {
+    component: require('!!raw-loader?lang=typescript!./on-select/on-select.ts'),
+    html: require('!!raw-loader?lang=markup!./on-select/on-select.html')
   }
 };

demo/src/app/components/+typeahead/demos/item-template/item-template.html

@@ -2,7 +2,7 @@
   <h5>This is: {{model | json}} Index: {{ index }}</h5>
 </ng-template>
 
-<pre class="card card-block card-header">Model: {{selected | json}}</pre>
+<pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
 <input [(ngModel)]="selected"
        [typeahead]="states"
        [typeaheadItemTemplate]="customItemTemplate"

demo/src/app/components/+typeahead/demos/on-select/on-select.html

@@ -0,0 +1,8 @@
+<pre class="card card-block card-header mb-3">Model: {{selectedValue | json}}</pre>
+<pre class="card card-block card-header mb-3">Selected option: {{selectedOption | json}}</pre>
+
+<input [(ngModel)]="selectedValue"
+       [typeahead]="states"
+       typeaheadOptionField="name"
+       (typeaheadOnSelect)="onSelect($event)"
+       class="form-control">

demo/src/app/components/+typeahead/demos/on-select/on-select.ts

@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-typeahead-on-select',
+  templateUrl: './on-select.html'
+})
+export class DemoTypeaheadOnSelectComponent {
+  selectedValue: string;
+  selectedOption: any;
+  states: any[] = [
+    { id: 1, name: 'Alabama', region: 'South' },
+    { id: 2, name: 'Alaska', region: 'West' },
+    { id: 3, name: 'Arizona', region: 'West' },
+    { id: 4, name: 'Arkansas', region: 'South' },
+    { id: 5, name: 'California', region: 'West' },
+    { id: 6, name: 'Colorado', region: 'West' },
+    { id: 7, name: 'Connecticut', region: 'Northeast' },
+    { id: 8, name: 'Delaware', region: 'South' },
+    { id: 9, name: 'Florida', region: 'South' },
+    { id: 10, name: 'Georgia', region: 'South' },
+    { id: 11, name: 'Hawaii', region: 'West' },
+    { id: 12, name: 'Idaho', region: 'West' },
+    { id: 13, name: 'Illinois', region: 'Midwest' },
+    { id: 14, name: 'Indiana', region: 'Midwest' },
+    { id: 15, name: 'Iowa', region: 'Midwest' },
+    { id: 16, name: 'Kansas', region: 'Midwest' },
+    { id: 17, name: 'Kentucky', region: 'South' },
+    { id: 18, name: 'Louisiana', region: 'South' },
+    { id: 19, name: 'Maine', region: 'Northeast' },
+    { id: 21, name: 'Maryland', region: 'South' },
+    { id: 22, name: 'Massachusetts', region: 'Northeast' },
+    { id: 23, name: 'Michigan', region: 'Midwest' },
+    { id: 24, name: 'Minnesota', region: 'Midwest' },
+    { id: 25, name: 'Mississippi', region: 'South' },
+    { id: 26, name: 'Missouri', region: 'Midwest' },
+    { id: 27, name: 'Montana', region: 'West' },
+    { id: 28, name: 'Nebraska', region: 'Midwest' },
+    { id: 29, name: 'Nevada', region: 'West' },
+    { id: 30, name: 'New Hampshire', region: 'Northeast' },
+    { id: 31, name: 'New Jersey', region: 'Northeast' },
+    { id: 32, name: 'New Mexico', region: 'West' },
+    { id: 33, name: 'New York', region: 'Northeast' },
+    { id: 34, name: 'North Dakota', region: 'Midwest' },
+    { id: 35, name: 'North Carolina', region: 'South' },
+    { id: 36, name: 'Ohio', region: 'Midwest' },
+    { id: 37, name: 'Oklahoma', region: 'South' },
+    { id: 38, name: 'Oregon', region: 'West' },
+    { id: 39, name: 'Pennsylvania', region: 'Northeast' },
+    { id: 40, name: 'Rhode Island', region: 'Northeast' },
+    { id: 41, name: 'South Carolina', region: 'South' },
+    { id: 42, name: 'South Dakota', region: 'Midwest' },
+    { id: 43, name: 'Tennessee', region: 'South' },
+    { id: 44, name: 'Texas', region: 'South' },
+    { id: 45, name: 'Utah', region: 'West' },
+    { id: 46, name: 'Vermont', region: 'Northeast' },
+    { id: 47, name: 'Virginia', region: 'South' },
+    { id: 48, name: 'Washington', region: 'South' },
+    { id: 49, name: 'West Virginia', region: 'South' },
+    { id: 50, name: 'Wisconsin', region: 'Midwest' },
+    { id: 51, name: 'Wyoming', region: 'West' }
+  ];
+
+  onSelect(event: any): void {
+    this.selectedOption = event.item;
+  }
+}

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

@@ -1,4 +1,4 @@
-<pre class="card card-block card-header">Model: {{selected | json}}</pre>
+<pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
 <input [(ngModel)]="selected"
        [typeahead]="states"
        [typeaheadScrollable]="true"

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

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

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

@@ -6,6 +6,7 @@ import { DemoTypeaheadFormsComponent } from './demos/in-form/in-form';
 import { DemoTypeaheadGroupingComponent } from './demos/grouping/grouping';
 import { DemoTypeaheadDropupComponent } from './demos/dropup/dropup';
 import { DemoTypeaheadScrollableComponent } from './demos/scrollable/scrollable';
+import { DemoTypeaheadOnSelectComponent } from './demos/on-select/on-select';
 
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -83,6 +84,16 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader?lang=typescript!./demos/scrollable/scrollable.ts'),
         html: require('!!raw-loader?lang=markup!./demos/scrollable/scrollable.html'),
         outlet: DemoTypeaheadScrollableComponent
+      },
+      {
+        title: 'On select',
+        anchor: 'on-select',
+        description: `
+          <p>Fired when an option was selected, returns an object with this option</p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/on-select/on-select.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/on-select/on-select.html'),
+        outlet: DemoTypeaheadOnSelectComponent
       }
     ]
   },

src/typeahead/typeahead-container.component.ts

@@ -1,9 +1,18 @@
-import { Component, ElementRef, HostListener, QueryList, TemplateRef, ViewChild, ViewChildren, Renderer2 } from '@angular/core';
-import { isBs3 } from '../utils/theme-provider';
-import { TypeaheadMatch } from './typeahead-match.class';
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewChildren,
+  Renderer2
+} from '@angular/core';
+
+import { isBs3, Utils } from '../utils';
 import { latinize } from './typeahead-utils';
+import { TypeaheadMatch } from './typeahead-match.class';
 import { TypeaheadDirective } from './typeahead.directive';
-import { Utils } from '../utils/utils.class';
 
 @Component({
   selector: 'typeahead-container',
@@ -195,14 +204,15 @@ export class TypeaheadContainerComponent {
       const ulPaddingTop = parseFloat((ulStyles['padding-top'] ? ulStyles['padding-top'] : '0').replace('px', ''));
       const optionHeight = parseFloat((liStyles['height'] ? liStyles['height'] : '0').replace('px', ''));
       const height = this.typeaheadOptionsInScrollableView * optionHeight;
-      this.guiHeight = (height + ulPaddingTop + ulPaddingBottom) + 'px';
+      this.guiHeight = `${height + ulPaddingTop + ulPaddingBottom}px`;
     }
     this.renderer.setStyle(this.element.nativeElement, 'visibility', 'visible');
   }
 
   scrollPrevious(index: number): void {
     if (index === 0) {
       this.scrollToBottom();
+
       return;
     }
     if (this.liElements) {
@@ -216,6 +226,7 @@ export class TypeaheadContainerComponent {
   scrollNext(index: number): void {
     if (index + 1 > this.matches.length - 1) {
       this.scrollToTop();
+
       return;
     }
     if (this.liElements) {
@@ -237,7 +248,7 @@ export class TypeaheadContainerComponent {
     const elemBottom = elemTop + elem.offsetHeight;
 
     return ((elemBottom <= containerViewBottom) && (elemTop >= containerViewTop));
-  }
+  };
 
   private scrollToBottom(): void {
     this.ulElement.nativeElement.scrollTop = this.ulElement.nativeElement.scrollHeight;

src/typeahead/typeahead.directive.ts

@@ -95,7 +95,7 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
    * in case of matches are not detected
    */
   @Output() typeaheadNoResults: EventEmitter<boolean> = new EventEmitter();
-  /** fired when option was selected, return object with data of this option */
+  /** fired when an option was selected, returns an object with this option. */
   @Output() typeaheadOnSelect: EventEmitter<TypeaheadMatch> = new EventEmitter();
   /** fired when blur event occurres. returns the active item */
   @Output() typeaheadOnBlur: EventEmitter<any> = new EventEmitter();