Merge branch 'master' into vslavov/ng-add-depenendencies-explicit

Author: Lipata

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html

@@ -1,4 +1,10 @@
 <ng-container *ngIf="isRowContext">
+    <button *ngIf="inPinnedArea && pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
+        <igx-icon fontSet="filtering-icons" name="jump_down"></igx-icon>
+    </button>
+    <button *ngIf="inPinnedArea && !pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
+        <igx-icon fontSet="filtering-icons" name="jump_up"></igx-icon>
+    </button>
     <button *ngIf="!pinned" igxRipple igxButton="icon" (click)="pin($event)">
         <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
     </button>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts

@@ -7,6 +7,7 @@ import { IgxGridModule, IgxGridComponent } from '../../grids/grid';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 import { IgxActionStripModule } from '../action-strip.module';
+import { wait } from '../../test-utils/ui-interactions.spec';
 
 
 describe('igxGridPinningActions #grid ', () => {
@@ -57,8 +58,22 @@ describe('igxGridPinningActions #grid ', () => {
         expect(grid.pinnedRows.length).toBe(0);
     });
 
-    it('should allow navigating to disabled row in unpinned area', () => {
-        pending('implementation');
+    it('should allow navigating to disabled row in unpinned area', async() => {
+        grid.pinRow('FAMIA');
+        fixture.detectChanges();
+
+        actionStrip.show(grid.pinnedRows[0]);
+        fixture.detectChanges();
+
+        const jumpIcon = fixture.debugElement.query(By.css(`igx-icon[name=jump_down]`));
+        jumpIcon.parent.triggerEventHandler('click', new Event('click'));
+        await wait();
+        fixture.detectChanges();
+        await wait();
+        fixture.detectChanges();
+
+        const secondToLastVisible = grid.rowList.toArray()[grid.rowList.length - 2];
+        expect(secondToLastVisible.rowID).toEqual('FAMIA');
     });
 });
 

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts

@@ -35,6 +35,31 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         return context && context.pinned;
     }
 
+    /**
+     * Getter to know if the row is in pinned and ghost
+     * @hidden
+     * @internal
+     */
+    get inPinnedArea(): boolean {
+        if (!this.isRow(this.strip.context)) {
+            return;
+        }
+        const context = this.strip.context;
+        return this.pinned && !context.disabled;
+    }
+
+    /**
+     * Getter to know if the row pinning is set to top or bottom
+     * @hidden
+     * @internal
+     */
+    get pinnedTop(): boolean {
+        if (!this.isRow(this.strip.context)) {
+            return;
+        }
+        return this.strip.context.grid.isRowPinningToTop;
+    }
+
     /**
      * Pin the row according to the context.
      * @example
@@ -75,6 +100,16 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         this.strip.hide();
     }
 
+    public scrollToRow(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        const context = this.strip.context;
+        const grid = context.grid;
+        grid.scrollTo(context.rowData, 0);
+        this.strip.hide();
+    }
+
     private renderIcons(): void {
         if (!this.isRow(this.strip.context)) {
             return;

projects/igniteui-angular/src/lib/date-range-picker/README.md

@@ -68,19 +68,19 @@ With `IgxDateStartComponent`, `IgxDateEndComponent` and `IgxDateTimeEditorDirect
 The default template:
 ```html
 <igx-date-range-picker>
-    <igx-pickers-toggle igxPrefix>
+    <igx-picker-toggle igxPrefix>
         <igx-icon>calendar_view_day</igx-icon>
-    </igx-pickers-toggle>
+    </igx-picker-toggle>
 </igx-date-range-picker>
 ```
 
 With projected inputs:
 ```html
 <igx-date-range-picker>
     <igx-date-range-start>
-        <igx-pickers-toggle igxPrefix>
+        <igx-picker-toggle igxPrefix>
             <igx-icon>calendar_view_day</igx-icon>
-        </igx-pickers-toggle>
+        </igx-picker-toggle>
     </igx-date-range-start>
     <igx-date-range-end>
     </igx-date-range-end>

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -831,8 +831,9 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                     // need to adjust the offsets so that item is last in view.
                     const updatesToIndex = this._adjustToIndex - this.state.startIndex + 1;
                     const sumDiffs = diffs.slice(0, updatesToIndex).reduce(reducer);
-                    const currOffset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
-                    this.dc.instance._viewContainer.element.nativeElement.style.top = (currOffset - sumDiffs) + 'px';
+                    if (sumDiffs !== 0) {
+                        this.addScrollTop(sumDiffs);
+                    }
                     this._adjustToIndex = null;
                 }
             }

projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts

@@ -494,6 +494,18 @@ describe('IgxInput', () => {
         expect(igxInput.valid).toBe(IgxInputState.INITIAL);
     }));
 
+    it('should correctly update enabled/disabled state of igxInput when changed via reactive form', fakeAsync(() => {
+        const fixture = TestBed.createComponent(ReactiveFormComponent);
+        fixture.detectChanges();
+        const igxInput = fixture.componentInstance.strIgxInput;
+
+        fixture.componentInstance.form.disable();
+        expect(igxInput.disabled).toBe(true);
+
+        fixture.componentInstance.form.get('str').enable();
+        expect(igxInput.disabled).toBe(false);
+    }));
+
     it('should style input when required is toggled dynamically.', () => {
         const fixture = TestBed.createComponent(ToggleRequiredWithNgModelInputComponent);
         fixture.detectChanges();

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -39,7 +39,7 @@ export enum IgxInputState {
  * @example
  * ```html
  * <input-group>
- *  <label for="address">Adress</label>
+ *  <label for="address">Address</label>
  *  <input igxInput name="address" type="text" [(ngModel)]="customer.address">
  * </input-group>
  * ```
@@ -289,6 +289,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
      * @internal
      */
     protected onStatusChanged() {
+        // Enable/Disable control based on ngControl #7086
+        if (this.disabled !== this.ngControl.disabled) {
+            this.disabled = this.ngControl.disabled;
+        }
         if (this.ngControl.control.validator || this.ngControl.control.asyncValidator) {
             if (this.ngControl.control.touched || this.ngControl.control.dirty) {
                 //  TODO: check the logic when control is touched or dirty

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -229,7 +229,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
 
         if (grid.hasPinnedRecords && isPinned) {
             const result = collection.filter(rec => grid.isRecordPinned(rec));
-            result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
+            result.sort((rec1, rec2) => grid.getInitialPinnedIndex(rec1) - grid.getInitialPinnedIndex(rec2));
             return result;
         }
 

projects/igniteui-angular/src/lib/grids/filtering/svgIcons.ts

@@ -228,5 +228,17 @@ export default [
           <rect x="7.5" y="7.5" width="3.75" height="3.75"/>
           <rect x="12.75" y="7.5" width="3.75" height="3.75"/>
         </svg>`
+    },
+    {
+        name: 'jump_up',
+        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 8l4 4H7c0 3.31 2.69 6 6 6 1.01 0 1.97-.25 2.8-.7l1.46 1.46A7.93 7.93 0 0113 20c-4.42 0-8-3.58-8-8H2l4-4zm15-5v2H5V3h16z"/>
+        </svg>`
+    },
+    {
+        name: 'jump_down',
+        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M21 19v2H5v-2h16zM13 4c1.57 0 3.03.46 4.26 1.24L15.8 6.7A5.87 5.87 0 0013 6c-3.31 0-6 2.69-6 6h3l-4 4-4-4h3c0-4.42 3.58-8 8-8z"/>
+        </svg>`
     }
 ];

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

@@ -2449,9 +2449,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected destroy$ = new Subject<any>();
 
-    protected _filteredSortedPinnedData;
-    protected _filteredSortedUnpinnedData;
-    protected _filteredPinnedData;
+    protected _filteredSortedPinnedData: any[];
+    protected _filteredSortedUnpinnedData: any[];
+    protected _filteredPinnedData: any[];
 
     /**
      * @hidden
@@ -2711,15 +2711,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         });
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    public isRecordPinned(rec) {
-        const id = this.primaryKey ? rec[this.primaryKey] : rec;
-        return this._pinnedRecordIDs.indexOf(id) !== -1;
-    }
-
     /**
      * Returns whether the record is pinned or not.
      *
@@ -2737,9 +2728,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * Returns whether the record is pinned or not.
      *
      * @param rowIndex Index of the record in the `filteredSortedData` collection.
-     *
-     * @hidden
-     * @internal
      */
     public isRecordPinnedByIndex(rowIndex: number) {
         return this.hasPinnedRecords && (this.isRowPinningToTop && rowIndex < this._filteredSortedPinnedData.length) ||
@@ -2750,8 +2738,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      * @internal
      */
-    public pinRecordIndex(rec) {
-        const id = this.primaryKey ? rec[this.primaryKey] : rec;
+    public isRecordPinned(rec) {
+        return this.getInitialPinnedIndex(rec) !== -1;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     * Returns the record index in order of pinning by the user. Does not consider sorting/filtering.
+     */
+    public getInitialPinnedIndex(rec) {
+        const id = this.gridAPI.get_row_id(rec);
         return this._pinnedRecordIDs.indexOf(id);
     }
 
@@ -3015,12 +3012,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public setFilteredSortedData(data, pinned: boolean) {
         data = data || [];
-        if (this._pinnedRecordIDs.length > 0 && pinned) {
+        if (this.pinnedRecordsCount > 0 && pinned) {
             this._filteredSortedPinnedData = data;
             this.pinnedRecords = data;
             this.filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
             [... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
-        } else if (this._pinnedRecordIDs.length > 0 && !pinned) {
+        } else if (this.pinnedRecordsCount > 0 && !pinned) {
             this._filteredSortedUnpinnedData = data;
         } else {
             this.filteredSortedData = data;
@@ -5959,7 +5956,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    protected scrollTo(row: any | number, column: any | number, inCollection = this.filteredSortedData): void {
+    protected scrollTo(row: any | number, column: any | number, inCollection = this._filteredSortedUnpinnedData): void {
         let delayScrolling = false;
 
         if (this.paging && typeof (row) !== 'number') {