Merge branch 'master' into bpenkov/igx-date-range

Author: Lipata

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

@@ -10,7 +10,8 @@ import {
     IgxGridPaginatorOptionsPipe,
     IgxHasVisibleColumnsPipe,
     IgxDatePipeComponent,
-    IgxDecimalPipeComponent
+    IgxDecimalPipeComponent,
+    IgxGridRowPinningPipe
 } from './pipes';
 
 @NgModule({
@@ -24,7 +25,8 @@ import {
         IgxGridCellStylesPipe,
         IgxGridCellStyleClassesPipe,
         IgxGridPaginatorOptionsPipe,
-        IgxHasVisibleColumnsPipe
+        IgxHasVisibleColumnsPipe,
+        IgxGridRowPinningPipe
     ],
     exports: [
         IgxDatePipeComponent,
@@ -36,7 +38,8 @@ import {
         IgxGridCellStylesPipe,
         IgxGridCellStyleClassesPipe,
         IgxGridPaginatorOptionsPipe,
-        IgxHasVisibleColumnsPipe
+        IgxHasVisibleColumnsPipe,
+        IgxGridRowPinningPipe
     ],
     imports: [
         CommonModule

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

@@ -212,3 +212,34 @@ export class IgxDecimalPipeComponent extends DecimalPipe implements PipeTransfor
         }
     }
 }
+
+/**
+ * @hidden
+ */
+@Pipe({
+    name: 'gridRowPinning',
+    pure: true
+})
+export class IgxGridRowPinningPipe implements PipeTransform {
+
+    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {}
+
+    public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) {
+        const grid = this.gridAPI.grid;
+
+        if (!grid.hasPinnedRecords) {
+            return isPinned ? [] : collection;
+        }
+
+        if (grid.hasPinnedRecords && isPinned) {
+            const result = collection.filter(rec => grid.isRecordPinned(rec));
+            result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
+            return result;
+        }
+
+        grid.unpinnedRecords = collection;
+        return collection.map((rec) => {
+            return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
+        });
+    }
+}

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -24,7 +24,7 @@ import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../
 import { ExpressionUI } from '../grid-filtering.service';
 import { IgxDropDownItemComponent } from '../../../drop-down/drop-down-item.component';
 import { IgxFilteringService } from '../grid-filtering.service';
-import { KEYS, isEdge, isIE } from '../../../core/utils';
+import { KEYS, isEdge } from '../../../core/utils';
 import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll';
 
 /**
@@ -262,11 +262,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     public onInput(eventArgs) {
         // The 'iskeyPressed' flag is needed for a case in IE, because the input event is fired on focus and for some reason,
         // when you have a japanese character as a placeholder, on init the value here is empty string .
-        // There is no need to reset the value on every invalid number input.
-        // The invalid value is converted to empty string input type="number"
-        const target = eventArgs.target;
-        if (isEdge() && target.type !== 'number' || this.isKeyPressed && isIE() || target.value) {
-             this.value = target.value;
+        if (isEdge() || this.isKeyPressed || eventArgs.target.value) {
+            this.value = eventArgs.target.value;
         }
     }
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -350,7 +350,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         }
     }
 
-    constructor(private cdr: ChangeDetectorRef) {}
+    constructor(private cdr: ChangeDetectorRef, private element: ElementRef) {}
 
     /**
      * @hidden @internal
@@ -519,7 +519,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         this.customDialog.selectedOperator = eventArgs.newSelection.value;
         eventArgs.cancel = true;
         if (this.overlayComponentId) {
-            this.mainDropdown.nativeElement.style.display = 'none';
+            this.element.nativeElement.style.display = 'none';
         }
         this.subMenu.close();
         this.customDialog.open(this.mainDropdown.nativeElement);

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

@@ -2930,8 +2930,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
     public setFilterData(data, pinned: boolean) {
         if (this.hasPinnedRecords && pinned) {
-            this._filteredPinnedData = data;
-            this.filteredData = [... this._filteredPinnedData, ... this._filteredUnpinnedData];
+            this._filteredPinnedData = data || [];
+            const filteredUnpinned =  this._filteredUnpinnedData || [];
+            this.filteredData = [... this._filteredPinnedData, ... filteredUnpinned];
         } else if (this.hasPinnedRecords && !pinned) {
             this._filteredUnpinnedData = data;
         } else {
@@ -2987,6 +2988,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @internal
      */
     public setFilteredSortedData(data, pinned: boolean) {
+        data = data.map(rec => rec.ghostRecord !== undefined ? rec.recordRef : rec);
         if (this._pinnedRecordIDs.length > 0 && pinned) {
             this._filteredSortedPinnedData = data;
             this.filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
@@ -5164,13 +5166,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer.igxForOf;
     }
 
-    /**
-     * Returns the currently transformed paged/filtered/sorted/grouped pinned data, displayed in the grid.
-     * @example
-     * ```typescript
-     *      const pinnedDataView = this.grid.pinnedDataView;
-     * ```
-     */
+     /**
+      * Returns the currently transformed paged/filtered/sorted/grouped pinned data, displayed in the grid.
+      * @example
+      * ```typescript
+      *      const pinnedDataView = this.grid.pinnedDataView;
+      * ```
+      */
     get pinnedDataView(): any[] {
         return this.pinnedRows.map(row => row.rowData);
     }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -229,13 +229,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
 
             expect(grid.rowList.length).toEqual(3);
             verifyFilterRowUI(input, close, reset, false);
-
-            // greater than or equal to with invalid value should not reset filter
-            GridFunctions.openFilterDDAndSelectCondition(fix, 4);
-            GridFunctions.typeValueInFilterRowInput('254..', fix, input);
-
-            expect(grid.rowList.length).toEqual(3);
-            verifyFilterRowUI(input, close, reset, false);
         }));
 
         // UI tests boolean column

projects/igniteui-angular/src/lib/grids/grid/grid.module.ts

@@ -13,8 +13,7 @@ import {
     IgxGridPagingPipe,
     IgxGridGroupingPipe,
     IgxGridSortingPipe,
-    IgxGridFilteringPipe,
-    IgxGridRowPinningPipe
+    IgxGridFilteringPipe
 } from './grid.pipes';
 import { IgxGridGroupByRowComponent } from './groupby-row.component';
 import { IgxGridRowComponent } from './grid-row.component';
@@ -42,7 +41,6 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component';
     IgxGridPagingPipe,
     IgxGridSortingPipe,
     IgxGridFilteringPipe,
-    IgxGridRowPinningPipe,
     IgxGridSummaryPipe,
     IgxGridDetailsPipe,
     IgxGridExpandableCellComponent
@@ -63,7 +61,6 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component';
     IgxGridPagingPipe,
     IgxGridSortingPipe,
     IgxGridFilteringPipe,
-    IgxGridRowPinningPipe,
     IgxGridSummaryPipe,
     IgxGridDetailsPipe,
     IgxGridCommonModule

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

@@ -152,33 +152,3 @@ export class IgxGridFilteringPipe implements PipeTransform {
     }
 }
 
-/**
- * @hidden
- */
-@Pipe({
-    name: 'gridRowPinning',
-    pure: true
-})
-export class IgxGridRowPinningPipe implements PipeTransform {
-
-    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {}
-
-    public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) {
-        const grid = this.gridAPI.grid;
-
-        if (!grid.hasPinnedRecords) {
-            return isPinned ? [] : collection;
-        }
-
-        if (grid.hasPinnedRecords && isPinned) {
-            const result = collection.filter(rec => grid.isRecordPinned(rec));
-            result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
-            return result;
-        }
-
-        grid.unpinnedRecords = collection;
-        return collection.map((rec) => {
-            return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
-        });
-    }
-}

projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts

@@ -696,7 +696,7 @@ describe('IgxGrid - search API #grid - ', () => {
             setupGridScrollDetection(fix, grid);
             fix.detectChanges();
 
-            grid.data[29] = { ID: 30, Name: 'Eduardo Ramirez', JobTitle: 'Manager', HireDate: '1887-11-28T11:23:17.714Z' };
+            grid.data[29].HireDate = '1887-11-28T11:23:17.714Z';
             grid.width = '500px';
             grid.height = '600px';
             fixNativeElement = fix.debugElement.nativeElement;

projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

@@ -1,3 +1,6 @@
+<ng-template #defaultPinnedIndicator>
+    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
+</ng-template>
 <ng-template #defaultCell>
     <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
@@ -36,6 +39,8 @@
          (click)="toggle($event)" (focus)="onIndicatorFocus()" tabindex="-1">
          <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit:  this }">
         </ng-container>
+        <ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
+        </ng-container>
     </div>
     <div *ngIf="isLoading"
          (dblclick)="onLoadingDblClick($event)"