Merge branch 'development' into days-disabled-datepicker-5638

.travis.yml

@@ -146,7 +146,7 @@ jobs:
   - &surge
     stage: deploy
     script:
-    - if [[ "$NGV" == "ivy" ]]; then npm run demo.build:ivy; else npm run demo.build; fi
+    - if [[ "$NGV" == "ivy" || "$NGV" == "latest" ]]; then npm run demo.build:ivy; else npm run demo.build; fi
     deploy:
       provider: surge
       project: ./gh-pages/

cypress/full/typeahead_page_spec.ts

@@ -75,14 +75,14 @@ describe('Typeahead demo page test suite', () => {
       typeahead.isElementVisible(asyncData, typeahead.cardHeader);
       typeahead.isPreviewExist(asyncData, formTemplate);
       typeahead.isElementVisible(asyncData, typeahead.inputSelector);
-      typeahead.isInputHaveAttrs(asyncData, [{ attr: 'placeholder', value: 'Locations loaded with timeout' }]);
+      typeahead.isInputHaveAttrs(asyncData, [{ attr: 'placeholder', value: 'Locations loaded via observable' }]);
     });
 
-    it('when user starts to type a name of a State a drop-down with matches is shown, only 7 matches are shown',
+    it('when user starts to type a name of a State a drop-down with matches is shown, only 20 matches are shown',
       () => {
         typeahead.clearInputAndSendKeys(asyncData, 'a');
         typeahead.isElementVisible(asyncData, typeahead.activeDropdown);
-        typeahead.isDropdownHasNItems(typeahead.dropdownBtn, 7);
+        typeahead.isDropdownHasNItems(typeahead.dropdownBtn, 20);
       });
 
     it('when user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State',
@@ -436,7 +436,7 @@ describe('Typeahead demo page test suite', () => {
       typeahead.isElementVisible(scrollable, typeahead.inputSelector);
     });
 
-    it.only(`when there are any matches then a drop-down with a list of States matches is shown. user is able to scroll
+    it(`when there are any matches then a drop-down with a list of States matches is shown. user is able to scroll
       down/up to see the matches list`, () => {
       typeahead.clearInputAndSendKeys(scrollable, textToInput);
       typeahead.isElementVisible(scrollable, typeahead.activeDropdown);

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

@@ -21,6 +21,7 @@ import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-ap
 
 import { NgApiDocComponent, NgApiDocConfigComponent } from '../../docs/api-docs';
 import { DemoCarouselPauseOnFocusComponent } from './demos/pause-on-focus/pause-on-focus';
+import { DemoCarouseAnimatedComponent } from './demos/animated/animated';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -148,6 +149,13 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader!./demos/multilist-indicators-by-chunk/multilist-indicators-by-chunk.html'),
         outlet: DemoCarouselMultilistIndicatorsByChunkComponent
       },
+      {
+        title: 'With animation',
+        anchor: 'animated',
+        component: require('!!raw-loader!./demos/animated/animated.ts'),
+        html: require('!!raw-loader!./demos/animated/animated.html'),
+        outlet: DemoCarouseAnimatedComponent
+      },
       {
         title: 'Accessibility',
         anchor: 'accessibility',

demo/src/app/components/+carousel/demos/animated/animated.html

@@ -0,0 +1,11 @@
+<carousel [isAnimated]="true">
+  <slide>
+    <img src="assets/images/nature/1.jpg" alt="first slide" style="display: block; width: 100%;">
+  </slide>
+  <slide>
+    <img src="assets/images/nature/2.jpg" alt="second slide" style="display: block; width: 100%;">
+  </slide>
+  <slide>
+    <img src="assets/images/nature/3.jpg" alt="third slide" style="display: block; width: 100%;">
+  </slide>
+</carousel>

demo/src/app/components/+carousel/demos/animated/animated.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-carousel-animated',
+  templateUrl: './animated.html'
+})
+export class DemoCarouseAnimatedComponent {}

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

@@ -18,6 +18,7 @@ import {
 
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
 import { DemoCarouselPauseOnFocusComponent } from './pause-on-focus/pause-on-focus';
+import { DemoCarouseAnimatedComponent } from './animated/animated';
 
 export const DEMO_COMPONENTS = [
   DemoAccessibilityComponent,
@@ -36,5 +37,6 @@ export const DEMO_COMPONENTS = [
   DemoCarouselMultilistSingleOffsetComponent,
   DemoCarouselPauseOnFocusComponent,
   DemoCarouselPauseOnHoverComponent,
-  DemoCarouselSlideChangedEventComponent
+  DemoCarouselSlideChangedEventComponent,
+  DemoCarouseAnimatedComponent
 ];

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

@@ -45,10 +45,10 @@ export const demoComponentContent: ContentSection[] = [
         anchor: 'events',
         component: require('!!raw-loader!./demos/events/events'),
         html: require('!!raw-loader!./demos/events/events.html'),
-        description: `Collapse directive exposes 4 events: <code>collapses</code>, that fires when a collapse was triggered (aniamtion start),
-                        <code>collapsed</code>, that fires when a content was hidden (aniamtion finished), 
+        description: `Collapse directive exposes 4 events: <code>collapses</code>, that fires when a collapse was triggered (animation start),
+                        <code>collapsed</code>, that fires when a content was hidden (animation finished),
                         <code>expands</code>, that fires when a expansion was triggered (animation start)
-                      and <code>expanded</code>, that fires when a content was shown\`, and <code>expanded</code>, that fires when a content was shown`,
+                      and <code>expanded</code>, that fires when a content was shown`,
         outlet: CollapseDemoEventsComponent
       },
       {

demo/src/app/components/+collapse/demos/events/events.ts

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
 })
 export class CollapseDemoEventsComponent {
   isCollapsed = false;
-  message: string;
+  message: string = 'expanded';
 
   collapsed(): void {
     this.message = 'collapsed';

demo/src/app/components/+modal/demos/accessibility/accessibility.html

@@ -1 +1,15 @@
-<p>Be sure to add <code class="highlighter-rouge">role="dialog"</code> and <code class="highlighter-rouge">aria-labelledby="..."</code>, referencing the modal title, to <code class="highlighter-rouge">.modal</code>, and <code class="highlighter-rouge">role="document"</code> to the <code class="highlighter-rouge">.modal-dialog</code> itself. Additionally, you may give a description of your modal dialog with <code class="highlighter-rouge">aria-describedby</code> on <code class="highlighter-rouge">.modal</code>.</p>
+<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
+
+<ng-template #template>
+  <div class="modal-header">
+    <h4 class="modal-title pull-left" id="my-modal-title">Modal title</h4>
+    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <div id="my-modal-description">
+      This is a modal.
+    </div>
+  </div>
+</ng-template>

demo/src/app/components/+modal/demos/accessibility/accessibility.ts

@@ -1,7 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef } from '@angular/core';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 
 @Component({
   selector: 'demo-accessibility',
   templateUrl: './accessibility.html'
 })
-export class DemoAccessibilityComponent {}
+export class DemoAccessibilityComponent {
+  modalRef: BsModalRef;
+  constructor(private modalService: BsModalService) {}
+
+  openModal(template: TemplateRef<any>) {
+    this.modalRef = this.modalService.show(template, {
+      ariaDescribedby: 'my-modal-description',
+      ariaLabelledBy: 'my-modal-title'
+    });
+  }
+}

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

@@ -19,9 +19,9 @@ import { DemoAccessibilityComponent } from './demos/accessibility/accessibility'
 import { DemoModalWithPopupsComponent } from './demos/modal-with-popups/modal-with-popups';
 
 import { ContentSection } from '../../docs/models/content-section.model';
-import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
-import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
-import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
+import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section';
+import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section';
+import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';
 
 import {
   NgApiDocComponent,
@@ -224,6 +224,22 @@ export const demoComponentContent: ContentSection[] = [
       {
         title: 'Accessibility',
         anchor: 'accessibility',
+        component: require('!!raw-loader!./demos/accessibility/accessibility.ts'),
+        html: require('!!raw-loader!./demos/accessibility/accessibility.html'),
+        description: `
+        <p>
+          Be sure to add <code class="highlighter-rouge">id=""</code> attribute to your title and description
+          in the template to make your modal works according to accessibility. The <code class="highlighter-rouge">aria-labelledby</code>
+          attribute establishes relationships between the modal and its title (only if the title has id attribute). The element
+          containing the modal's description is referenced by <code class="highlighter-rouge">aria-describedby</code> attribute.
+          The dialog does not need <code class="highlighter-rouge">aria-describedby</code> since there is no static
+          text that describes it.
+        </p>
+        <p>
+        Use modal options to set <code class="highlighter-rouge">aria-labelledby</code> and
+        <code class="highlighter-rouge">aria-describedby</code> attributes.
+        </p>
+        `,
         outlet: DemoAccessibilityComponent
       }
     ]

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

@@ -4,5 +4,6 @@
        [typeahead]="dataSource"
        [typeaheadAsync]="true"
        typeaheadOptionField="name"
+       (typeaheadLoading)="changeTypeaheadLoading($event)"
        placeholder="Locations loaded via observable"
        class="form-control">

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
-import { Observable, of } from 'rxjs';
+import { Observable, of, Subscriber } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
 
 interface DataSourceType {
   id: number;
@@ -15,6 +16,7 @@ interface DataSourceType {
 export class DemoTypeaheadAsyncComponent {
   asyncSelected: string;
   dataSource: Observable<DataSourceType[]>;
+  typeaheadLoading: boolean;
   statesComplex: DataSourceType[] = [
     { id: 1, name: 'Alabama', region: 'South' },
     { id: 2, name: 'Alaska', region: 'West' },
@@ -69,6 +71,26 @@ export class DemoTypeaheadAsyncComponent {
   ];
 
   constructor() {
-    this.dataSource = of(this.statesComplex);
+    this.dataSource = new Observable((observer: Subscriber<string>) => {
+      // Runs on every search
+      observer.next(this.asyncSelected);
+    })
+      .pipe(
+        mergeMap((token: string) => this.getStatesAsObservable(token))
+      );
+  }
+
+  getStatesAsObservable(token: string): Observable<DataSourceType[]> {
+    const query = new RegExp(token, 'i');
+
+    return of(
+      this.statesComplex.filter((state: any) => {
+        return query.test(state.name);
+      })
+    );
+  }
+
+  changeTypeaheadLoading(e: boolean): void {
+    this.typeaheadLoading = e;
   }
 }

demo/src/app/components/+typeahead/demos/cancel-on-focus-lost/cancel-on-focus-lost.html

@@ -0,0 +1,11 @@
+<pre class="card card-block card-header">Model: {{asyncSelected | json}}</pre>
+
+<input [(ngModel)]="asyncSelected"
+       [typeahead]="dataSource"
+       (typeaheadLoading)="changeTypeaheadLoading($event)"
+       (typeaheadOnSelect)="typeaheadOnSelect($event)"
+       [typeaheadOptionsLimit]="7"
+       typeaheadOptionField="name"
+       placeholder="Locations loaded with timeout"
+       class="form-control">
+<div *ngIf="typeaheadLoading">Loading</div>

demo/src/app/components/+typeahead/demos/cancel-on-focus-lost/cancel-on-focus-lost.ts

@@ -0,0 +1,102 @@
+import { Component } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';
+import { mergeMap, delay } from 'rxjs/operators';
+import { TypeaheadConfig } from 'ngx-bootstrap/typeahead';
+
+export function getTypeaheadConfig(): TypeaheadConfig {
+  return Object.assign(new TypeaheadConfig(), { cancelRequestOnFocusLost: true });
+}
+
+@Component({
+  selector: 'demo-typeahead-cancel-on-focus-lost',
+  templateUrl: './cancel-on-focus-lost.html',
+  providers: [{ provide: TypeaheadConfig, useFactory: getTypeaheadConfig }]
+})
+export class DemoTypeaheadCancelRequestOnFocusLostComponent {
+  asyncSelected: string;
+  typeaheadLoading: boolean;
+  typeaheadNoResults: boolean;
+  dataSource: Observable<any>;
+  statesComplex: 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' }
+  ];
+
+  constructor() {
+    this.dataSource = Observable.create((observer: any) => {
+      // Runs on every search
+      observer.next(this.asyncSelected);
+    })
+      .pipe(
+        mergeMap((token: string) => this.getStatesAsObservable(token)),
+        delay(1000)
+      );
+  }
+
+  getStatesAsObservable(token: string): Observable<any> {
+    const query = new RegExp(token, 'i');
+
+    return of(
+      this.statesComplex.filter((state: any) => {
+        return query.test(state.name);
+      })
+    );
+  }
+
+  changeTypeaheadLoading(e: boolean): void {
+    this.typeaheadLoading = e;
+  }
+
+  typeaheadOnSelect(e: TypeaheadMatch): void {
+    console.log('Selected value: ', e.value);
+  }
+}

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

@@ -7,6 +7,8 @@ import { DemoTypeaheadContainerComponent } from './container/container';
 import { DemoTypeaheadDelayComponent } from './delay/delay';
 import { DemoTypeaheadDropupComponent } from './dropup/dropup';
 import { DemoTypeaheadFieldComponent } from './field/field';
+import { DemoTypeaheadCancelRequestOnFocusLostComponent } from './cancel-on-focus-lost/cancel-on-focus-lost';
+import { DemoTypeaheadReactiveFormComponent } from './reactive-form/reactive-form';
 import { DemoTypeaheadFirstItemActiveComponent } from './first-item-active/first-item-active';
 import { DemoTypeaheadFormComponent } from './form/form';
 import { DemoTypeaheadGroupingComponent } from './grouping/grouping';
@@ -17,11 +19,11 @@ import { DemoTypeaheadNoResultComponent } from './no-result/no-result';
 import { DemoTypeaheadOnBlurComponent } from './on-blur/on-blur';
 import { DemoTypeaheadOnSelectComponent } from './on-select/on-select';
 import { DemoTypeaheadPhraseDelimitersComponent } from './phrase-delimiters/phrase-delimiters';
-import { DemoTypeaheadReactiveFormComponent } from './reactive-form/reactive-form';
 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,
@@ -33,6 +35,9 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadDelayComponent,
   DemoTypeaheadDropupComponent,
   DemoTypeaheadFieldComponent,
+  DemoTypeaheadAsyncComponent,
+  DemoTypeaheadCancelRequestOnFocusLostComponent,
+  DemoTypeaheadReactiveFormComponent,
   DemoTypeaheadFirstItemActiveComponent,
   DemoTypeaheadFormComponent,
   DemoTypeaheadGroupingComponent,
@@ -47,5 +52,6 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadScrollableComponent,
   DemotypeaheadSelectFirstItemComponent,
   DemoTypeaheadShowOnBlurComponent,
-  DemoTypeaheadSingleWorldComponent
+  DemoTypeaheadSingleWorldComponent,
+  DemoTypeaheadOrderingComponent
 ];