Merge branch 'master' into set-width-hideallcolumns-master

Author: kdinev

CHANGELOG.md

@@ -68,6 +68,7 @@ All notable changes for each version of this project will be documented in this
     - `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
     - `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
     - `isContinuous` - input has been deleted. The option is not supported anymore.
+    - `onValueChanged` - new output has been exposed. This event is emitted at the end of every slide interaction. 
 
 - `IgxCarousel`:
     - `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation
@@ -82,6 +83,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxSelect`: 
     - adding `IgxSelectHeaderDirective` and `IgxSelectFooterDirective`. These can be used to provide a custom header, respectively footer templates for the `igxSelect` drop-down list. If there are no templates marked with these directives - no default templates will be used so the drop-down list will not have header nor footer.
 
+- `IgxDropDown`:
+    - `clearSelection` method is added, which can be used to deselect the selected dropdown item
+
 - `IgxCircularProgressBar`:
     - added `IgxProgressBarGradientDirective` to allow providing custom circular progress SVG gradients. Providing a custom gradient via a template is as easy as writing:
     ```html

projects/igniteui-angular/src/lib/drop-down/README.md

@@ -149,6 +149,7 @@ The following methods are available in the **igx-drop-down** component:
 | `setSelectedItem(index: number)` | Selects dropdown item by index. |
 | `open()` | Opens the dropdown. |
 | `close()` | Closes the dropdown. |
+| `clearSelection()` | Deselects the selected dropdown item. |
 
 ## Getters
 The following getters are available on the **igx-drop-down** component:

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -342,6 +342,39 @@ describe('IgxDropDown ', () => {
             expect(fixture.componentInstance.onSelection).toHaveBeenCalledTimes(1);
         }));
 
+        it('Should notify when selection is cleared', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxDropDownTestComponent);
+            fixture.detectChanges();
+            const button = fixture.debugElement.query(By.css('button')).nativeElement;
+            const list = fixture.componentInstance.dropdown;
+            const mockObj = jasmine.createSpyObj('mockEvt', ['stopPropagation', 'preventDefault']);
+            spyOn(list.onSelection, 'emit').and.callThrough();
+            spyOn(list.onClosed, 'emit').and.callThrough();
+            spyOn(fixture.componentInstance, 'onSelection');
+
+            list.setSelectedItem(1);
+
+            button.click(mockObj);
+            tick();
+            fixture.detectChanges();
+            expect(list.selectedItem).toEqual(list.items[1]);
+            expect(list.onSelection.emit).toHaveBeenCalledTimes(1);
+            expect(fixture.componentInstance.onSelection).toHaveBeenCalledTimes(1);
+
+            const selectionArgs: ISelectionEventArgs = {
+                newSelection: null,
+                oldSelection: list.items[1],
+                cancel: false
+            };
+            list.clearSelection();
+            tick();
+            fixture.detectChanges();
+            expect(list.selectedItem).toBeNull();
+            expect(list.onSelection.emit).toHaveBeenCalledTimes(2);
+            expect(fixture.componentInstance.onSelection).toHaveBeenCalledTimes(2);
+            expect(list.onSelection.emit).toHaveBeenCalledWith(selectionArgs);
+        }));
+
         it('Should check if selection event return the proper eventArgs', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxDropDownTestComponent);
             fixture.detectChanges();
@@ -678,6 +711,45 @@ describe('IgxDropDown ', () => {
             expect(currentItem.componentInstance.itemIndex).toEqual(5);
         }));
 
+        it('Should deselect item when clearSelection is called', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxDropDownTestScrollComponent);
+            fixture.detectChanges();
+            const button = fixture.debugElement.query(By.css('button')).nativeElement;
+            const list = fixture.componentInstance.dropdownScroll;
+            const listItems = list.items;
+
+            list.setSelectedItem(0);
+            button.click();
+            tick();
+            fixture.detectChanges();
+            let selectedItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_SELECTED));
+            expect(selectedItem.componentInstance.itemIndex).toEqual(0);
+            expect(listItems[0].selected).toBeTruthy();
+            expect(selectedItem.classes[CSS_CLASS_SELECTED]).toBeTruthy();
+
+            list.clearSelection();
+            tick();
+            fixture.detectChanges();
+            expect(listItems[0].selected).toBeFalsy();
+            selectedItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_SELECTED));
+            expect(selectedItem).toBeNull();
+
+            list.setSelectedItem(5);
+            tick();
+            fixture.detectChanges();
+            selectedItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_SELECTED));
+            expect(selectedItem.componentInstance.itemIndex).toEqual(5);
+            expect(listItems[5].selected).toBeTruthy();
+            expect(selectedItem.classes[CSS_CLASS_SELECTED]).toBeTruthy();
+
+            list.clearSelection();
+            tick();
+            fixture.detectChanges();
+            expect(listItems[5].selected).toBeFalsy();
+            selectedItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_SELECTED));
+            expect(selectedItem).toBeNull();
+        }));
+
         it('Home key should select the first enabled item', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxDropDownTestDisabledComponent);
             fixture.detectChanges();
@@ -1076,6 +1148,27 @@ describe('IgxDropDown ', () => {
             expect(selectedItem).toBeNull();
         }));
 
+        it('SelectedItem should return null when selection is cleared', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxDropDownTestScrollComponent);
+            fixture.detectChanges();
+            const button = fixture.debugElement.query(By.css('button')).nativeElement;
+            const igxDropDown = fixture.componentInstance.dropdownScroll;
+            igxDropDown.setSelectedItem(3);
+            button.click();
+            tick();
+
+            fixture.detectChanges();
+            let selectedItem = igxDropDown.selectedItem;
+            expect(selectedItem).toBeTruthy();
+            expect(selectedItem.itemIndex).toEqual(3);
+
+            igxDropDown.clearSelection();
+            fixture.detectChanges();
+            selectedItem = igxDropDown.selectedItem;
+            expect(selectedItem).toBeNull();
+        }));
+
+
         it('Should return empty array for items when there are no items', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxDropDownTestEmptyListComponent);
             fixture.detectChanges();

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -561,6 +561,23 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
         }
     }
 
+    /**
+     * Clears the selection of the dropdown
+     * ```typescript
+     * this.dropdown.clearSelection();
+     * ```
+     */
+    public clearSelection() {
+        const oldSelection = this.selectedItem;
+        const newSelection: IgxDropDownItemBaseDirective = null;
+        const args: ISelectionEventArgs = { oldSelection, newSelection, cancel: false };
+        this.onSelection.emit(args);
+        if (this.selectedItem && !args.cancel) {
+            this.selectedItem.selected = false;
+            this.selection.clear(this.id);
+        }
+    }
+
     /**
      * Checks whether the selection is valid
      * `null` - the selection should be emptied

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -5988,6 +5988,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         const actualScrollLeft = left + rowForOf.getColumnScrollLeft(rowForOf.state.startIndex);
         if (gridScrLeft !== actualScrollLeft) {
             rowForOf.onHScroll(gridScrLeft);
+            rowForOf.cdr.detectChanges();
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { first } from 'rxjs/operators';
+import { first, debounceTime } from 'rxjs/operators';
 import { IgxColumnComponent } from './columns/column.component';
 import { IgxGridGroupByRowComponent } from './grid/groupby-row.component';
 import { ISelectionNode } from './selection/selection.service';
@@ -262,7 +262,7 @@ export class IgxGridNavigationService {
            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
             this.grid.verticalScrollContainer.scrollTo(targetIndex !== -1 ? targetIndex : 0);
             this.grid.verticalScrollContainer.onChunkLoad
-                .pipe(first()).subscribe(() => {
+                .pipe(debounceTime(10)).pipe(first()).subscribe(() => {
                     const cells = this.grid.nativeElement.querySelectorAll(
                         `${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
                     if (cells.length > 0) { (cells[0] as HTMLElement).focus(); }
@@ -299,7 +299,7 @@ export class IgxGridNavigationService {
            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
             this.grid.verticalScrollContainer.scrollTo(targetIndex !== -1 ? targetIndex : this.grid.dataView.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
-                .pipe(first()).subscribe(() => {
+                .pipe(debounceTime(10)).pipe(first()).subscribe(() => {
                     const cells = this.grid.nativeElement.querySelectorAll(
                         `${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
                     if (cells.length > 0) {

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts

@@ -451,7 +451,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
                 // move focus to last summary row cell
                 const summaryRow = summaryRows[0].nativeElement;
                 this.focusPrevRow(summaryRow, lastIndex, childGrid, true, true);
-            } else if (childGrid.rowList.toArray().length === 0 &&
+            } else if (childGrid.rowList.length === 0 &&
              childGrid.allowFiltering && childGrid.filterMode === FilterMode.quickFilter) {
                  // move to filter cell
                 childGrid.navigation.moveFocusToFilterCell();
@@ -486,7 +486,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         const childGridID = gridElem.getAttribute('id');
         const childGrid = this.getChildGrid(childGridID, grid);
 
-        if (childGrid.rowList.toArray().length === 0) {
+        if (childGrid.rowList.length === 0) {
             this.focusNext(visibleColumnIndex, childGrid);
             return;
         }
@@ -516,7 +516,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         const childGridID = gridElem.getAttribute('id');
         const childGrid = this.getChildGrid(childGridID, grid);
 
-        if (childGrid.rowList.toArray().length === 0) {
+        if (childGrid.rowList.length === 0) {
             this.focusPrev(visibleColumnIndex, childGrid);
             return;
         }
@@ -669,7 +669,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
 
     private focusNextRow(elem, visibleColumnIndex, grid, isSummary?) {
         const cellSelector = this.getCellSelector(visibleColumnIndex, isSummary);
-        if (grid.navigation.isColumnFullyVisible(visibleColumnIndex)) {
+        if (grid.navigation.isColumnFullyVisible(visibleColumnIndex) || grid.rowList.length === 0) {
             const cell =
                 elem.querySelector(`${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
             const closestScrollableGrid = this.getNextScrollableDown(grid).grid;

projects/igniteui-angular/src/lib/slider/slider.common.ts

@@ -48,7 +48,7 @@ export interface IRangeSliderValue {
     upper: number;
 }
 
-export interface ISliderValueChangeEventArgs extends IBaseEventArgs {
+export interface ISliderValueChangeEventArgs {
     oldValue: number | IRangeSliderValue;
     value: number | IRangeSliderValue;
 }

projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

@@ -1326,6 +1326,34 @@ describe('IgxSlider', () => {
             expect(slider.lowerBound).toEqual(expectedMinVal);
             expect(slider.upperBound).toEqual(expectedMaxVal);
         });
+
+        it('Should emit onValueChanged only when stop interacting with the slider', () => {
+            const fix = TestBed.createComponent(SliderTestComponent);
+            fix.detectChanges();
+
+            const instance = fix.componentInstance;
+            const spyOnValueChanged = spyOn<any>(instance.slider.onValueChanged, 'emit').and.callThrough();
+            const sliderEl = fix.debugElement.query(By.css(SLIDER_CLASS));
+            sliderEl.triggerEventHandler('focus', null);
+            fix.detectChanges();
+
+            sliderEl.triggerEventHandler('pointerdown', {pointerId: 1, clientX: 200, preventDefault: <any>( ( e: any ) => {  })});
+            fix.detectChanges();
+            let currentValue = instance.slider.value;
+            expect(spyOnValueChanged).toHaveBeenCalledTimes(0);
+            expect(currentValue).toBeGreaterThan(0);
+
+            sliderEl.triggerEventHandler('pointerdown', {pointerId: 1, clientX: 300, preventDefault: <any>( ( e: any ) => {  })});
+            fix.detectChanges();
+            expect(spyOnValueChanged).toHaveBeenCalledTimes(0);
+            expect(instance.slider.value).toBeGreaterThan(currentValue as number);
+
+            currentValue = instance.slider.value;
+            sliderEl.triggerEventHandler('pointerup', {pointerId: 1, preventDefault: <any>( ( e: any ) => {  })});
+            fix.detectChanges();
+            expect(spyOnValueChanged).toHaveBeenCalledTimes(1);
+            expect(instance.slider.value).toEqual(currentValue);
+        });
     });
 
     describe('igxSlider ticks', () => {

projects/igniteui-angular/src/lib/slider/slider.component.ts

@@ -740,7 +740,7 @@ export class IgxSliderComponent implements
     }
 
     /**
-     * This event is emitted when user has stopped interacting the thumb and value is changed.
+     * This event is emitted every time the value is changed.
      * ```typescript
      * public change(event){
      *    alert("The value has been changed!");
@@ -753,6 +753,20 @@ export class IgxSliderComponent implements
     @Output()
     public onValueChange = new EventEmitter<ISliderValueChangeEventArgs>();
 
+    /**
+     * This event is emitted at the end of every slide interaction.
+     * ```typescript
+     * public change(event){
+     *    alert("The value has been changed!");
+     *}
+     * ```
+     * ```html
+     * <igx-slider (onValueChanged)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">
+     * ```
+     */
+    @Output()
+    public onValueChanged = new EventEmitter<number | IRangeSliderValue>();
+
 
     constructor(
         private renderer: Renderer2,
@@ -782,7 +796,7 @@ export class IgxSliderComponent implements
      * @hidden
      */
     @HostListener('pointerup', ['$event'])
-    public onPointerUp($event) {
+    public onPointerUp($event: PointerEvent) {
         if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
             return;
         }
@@ -791,6 +805,7 @@ export class IgxSliderComponent implements
         activeThumb.nativeElement.releasePointerCapture($event.pointerId);
 
         this.hideSliderIndicators();
+        this.onValueChanged.emit(this.value);
     }
 
     /**
@@ -809,22 +824,6 @@ export class IgxSliderComponent implements
         this.update($event.srcEvent.clientX);
     }
 
-    /**
-     * @hidden
-     */
-    @HostListener('panstart')
-    public onPanStart() {
-        this.showSliderIndicators();
-    }
-
-    /**
-     * @hidden
-     */
-    @HostListener('panend')
-    public onPanEnd() {
-        this.hideSliderIndicators();
-    }
-
     /**
      *Returns whether the `IgxSliderComponent` type is RANGE.
      *```typescript