chore(*): Merging with master

Author: kdinev

CHANGELOG.md

@@ -49,6 +49,7 @@ For more detailed information, see the [README](https://github.com/IgniteUI/igni
     - A new boolean `hideGroupedColumns` input controls whether the grouped columns should be hidden as well (defaults to false).
     - **Breaking change** `cellClasses` input on `IgxColumnComponent` now accepts an object literal to allow conditional cell styling.
     - Exposing a mechanism for cells to grow according to their content.
+    - `sortStrategy` input exposed to provide custom sort strategy for the `IgxColumnComponent`. The custom strategy should implement the `ISortingStrategy` interface, or can extend the base `SortingStrategy` class and override all or some of its public/protected members.
 - `igxFor`
     - Added support for variable heights.
 - `igx-datePicker` selector is deprecated. Use `igx-date-picker` selector instead.
@@ -155,6 +156,8 @@ When you focus a specific cell and press one of the following key combinations,
 
 ## 6.1.8
 
+### General
+
 ### Bug fixes
 
 - Fix sorting and groupby expression not syncing when there are already sorted columns. #2786

gulpfile.js

@@ -247,6 +247,10 @@ gulp.task('typedoc-build:doc:ja:localization', ['typedoc-build', 'typedoc:clean-
     shell.task(`typedoc ${TYPEDOC.PROJECT_PATH} --generate-from-json ${TYPEDOC.OUTPUT_PATH}/${TYPEDOC.REPO.TRANSLATIONS_REPO_NAME}/ja/ --templateStrings ${TYPEDOC.TEMPLATE_STRINGS_PATH} --localize jp`)
 );
 
+gulp.task('typedoc-build:doc:en:localization', ['typedoc-build', 'typedoc:clean-docs-dir', 'typedoc:copy-translations'],
+    shell.task(`typedoc ${TYPEDOC.PROJECT_PATH} --generate-from-json ${TYPEDOC.OUTPUT_PATH}/${TYPEDOC.REPO.TRANSLATIONS_REPO_NAME}/en/`)
+);
+
 gulp.task('typedoc-serve', ['typedoc-watch'], () => {
     browserSync.init({
         server: './dist/igniteui-angular/docs/typescript'

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

@@ -22,6 +22,7 @@ import {
     IgxCalendarSubheaderTemplateDirective
 } from './calendar.directives';
 import { DateRangeDescriptor, DateRangeType } from '../core/dates/dateRange';
+import { isDate } from 'util';
 
 let NEXT_ID = 0;
 
@@ -830,6 +831,10 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
      *```
      */
     public selectDate(value: Date | Date[]) {
+        if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
+            throw new Error('Date or array should be set for the selectDate method.');
+        }
+
         switch (this.selection) {
             case 'single':
                 this.selectSingle(value as Date);
@@ -850,8 +855,13 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
      *````
      */
     public deselectDate(value?: Date | Date[]) {
+        if (this.selectedDates === null || this.selectedDates === []) {
+            return;
+        }
+
         if (value === null || value === undefined) {
             this.selectedDates = this.selection === 'single' ? null : [];
+            this._onChangeCallback(this.selectedDates);
             return;
         }
 
@@ -1164,8 +1174,8 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
         if (Array.isArray(value)) {
             this.rangeStarted = false;
             value.sort((a: Date, b: Date) => a.valueOf() - b.valueOf());
-            start = this.getDateOnly(value.shift());
-            end = this.getDateOnly(value.pop());
+            start = this.getDateOnly(value[0]);
+            end = this.getDateOnly(value[value.length - 1]);
             this.selectedDates = [start, ...this.generateDateRange(start, end)];
         } else {
             if (!this.rangeStarted) {
@@ -1201,7 +1211,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
      * @hidden
      */
     private deselectSingle(value: Date) {
-        if (this.selectedDates !== null && value !== null &&
+        if (this.selectedDates !== null &&
             this.getDateOnlyInMs(value as Date) === this.getDateOnlyInMs(this.selectedDates)) {
             this.selectedDates = null;
             this._onChangeCallback(this.selectedDates);
@@ -1213,10 +1223,6 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
      * @hidden
      */
     private deselectMultiple(value: Date[]) {
-        if (value === null) {
-            return;
-        }
-
         value = value.filter(v => v !== null);
         const selectedDatesCount = this.selectedDates.length;
         const datesInMsToDeselect: Set<number> = new Set<number>(
@@ -1238,21 +1244,23 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
      * @hidden
      */
     private deselectRange(value: Date[]) {
-        if (value === null) {
-            return;
-        }
-
-        value = value.filter(v => v !== null);
-        if (value.length < 2) {
+        value = value.filter(v => v !== null && isDate(v));
+        if (value.length < 1) {
             return;
         }
 
         value.sort((a: Date, b: Date) => a.valueOf() - b.valueOf());
-        const start = this.getDateOnly(value.shift());
-        const end = this.getDateOnly(value.pop());
+        const valueStart = this.getDateOnlyInMs(value[0]);
+        const valueEnd = this.getDateOnlyInMs(value[value.length - 1]);
+
+        this.selectedDates.sort((a: Date, b: Date) => a.valueOf() - b.valueOf());
+        const selectedDatesStart = this.getDateOnlyInMs(this.selectedDates[0]);
+        const selectedDatesEnd = this.getDateOnlyInMs(this.selectedDates[this.selectedDates.length - 1]);
 
-        const deselectRange = [start, ...this.generateDateRange(start, end)];
-        this.deselectMultiple(deselectRange);
+        if (!(valueEnd < selectedDatesStart) && !(valueStart > selectedDatesEnd)) {
+            this.selectedDates = [];
+            this._onChangeCallback(this.selectedDates);
+        }
     }
 
     /**

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

@@ -401,5 +401,9 @@
         @return map-get($themes, $theme);
     }
 
-    @return call(get-function(#{$theme}-theme));
+    @if (function-exists('get-function')) {
+        @return call(get-function(#{$theme}-theme));
+    } @else {
+        @return call((#{$theme}-theme));
+    }
 }

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -87,6 +87,20 @@ export function isDate(value: any) {
     return Object.prototype.toString.call(value) === '[object Date]';
 }
 
+/**
+ * Cehcks if the two passed arguments are equal
+ * Currently supports date objects
+ * @param obj1
+ * @param obj2
+ * @returns: `boolean`
+ */
+export function isEqual(obj1, obj2): boolean {
+    if (isDate(obj1) && isDate(obj2)) {
+        return obj1.getTime() === obj2.getTime();
+    }
+    return obj1 === obj2;
+}
+
 /**
  *@hidden
  */

projects/igniteui-angular/src/lib/core/utils.ts

@@ -1,3 +1,5 @@
+import { ISortingStrategy } from './sorting-strategy';
+
 /**
  * Represents sorting expressions.
  */
@@ -11,4 +13,5 @@ export interface ISortingExpression {
    fieldName: string;
    dir: SortingDirection;
    ignoreCase?: boolean;
+   strategy?: ISortingStrategy;
 }

projects/igniteui-angular/src/lib/data-operations/sorting-expression.interface.ts

@@ -38,14 +38,18 @@ export class SortingStrategy implements ISortingStrategy {
         }
         return a > b ? 1 : a < b ? -1 : 0;
     }
-    protected compareObjects(obj1: object, obj2: object, key: string, reverse: number, ignoreCase: boolean) {
+    protected compareObjects(obj1: object, obj2: object, key: string, reverse: number, ignoreCase: boolean, strategy: ISortingStrategy) {
         let a = obj1[key];
         let b = obj2[key];
         if (ignoreCase) {
             a = a && a.toLowerCase ? a.toLowerCase() : a;
             b = b && b.toLowerCase ? b.toLowerCase() : b;
         }
-        return reverse * this.compareValues(a, b);
+        if (strategy) {
+            return reverse * strategy.compareValues(a, b);
+        } else {
+            return reverse * this.compareValues(a, b);
+        }
     }
     protected arraySort<T>(data: T[], compareFn?): T[] {
         return data.sort(compareFn);
@@ -78,7 +82,7 @@ export class SortingStrategy implements ISortingStrategy {
             false;
         const reverse = (expression.dir === SortingDirection.Desc ? -1 : 1);
         const cmpFunc = (obj1, obj2) => {
-            return this.compareObjects(obj1, obj2, key, reverse, ignoreCase);
+            return this.compareObjects(obj1, obj2, key, reverse, ignoreCase, expression.strategy);
         };
         return this.arraySort(data, cmpFunc);
     }

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts

@@ -33,10 +33,9 @@ let NEXT_ID = 0;
  *
  * @export
  */
-export interface ISelectionEventArgs {
+export interface ISelectionEventArgs extends CancelableEventArgs {
     oldSelection: IgxDropDownItemBase;
     newSelection: IgxDropDownItemBase;
-    cancel: boolean;
 }
 
 /** @hidden */
@@ -419,7 +418,7 @@ export class IgxDropDownBase implements OnInit, IToggleView {
      * @hidden
      */
     onToggleOpening(e: CancelableEventArgs) {
-        const eventArgs = { cancel: false};
+        const eventArgs = { cancel: false };
         this.onOpening.emit(eventArgs);
         e.cancel = eventArgs.cancel;
         if (eventArgs.cancel) {
@@ -449,7 +448,7 @@ export class IgxDropDownBase implements OnInit, IToggleView {
      * @hidden
      */
     onToggleClosing(e: CancelableEventArgs) {
-        const eventArgs = { cancel: false};
+        const eventArgs = { cancel: false };
         this.onClosing.emit(eventArgs);
         e.cancel = eventArgs.cancel;
     }
@@ -605,7 +604,7 @@ export class IgxDropDownItemNavigationDirective {
             const key = event.code ? event.code.toLowerCase() : event.key.toLowerCase();
             if (!this.target.collapsed) { // If dropdown is opened
                 const navKeys = ['esc', 'escape', 'enter', 'tab', 'space', 'spacebar',
-            'arrowup', 'up', 'arrowdown', 'down', 'home', 'end'];
+                    'arrowup', 'up', 'arrowdown', 'down', 'home', 'end'];
                 if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD
                     return;
                 }

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

@@ -278,6 +278,7 @@ Inputs available on the **IgxGridColumnComponent** to define columns:
 |`field`|string|Column field name|
 |`header`|string|Column header text|
 |`sortable`|boolean|Set column to be sorted or not|
+|`sortStrategy`| Provide custom sort strategy to be used when sorting|
 |`editable`|boolean|Set column values to be editable|
 |`filterable`|boolean|Set column values to be filterable|
 |`hasSummary`| boolean  |Sets whether or not the specific column has summaries enabled.|

projects/igniteui-angular/src/lib/grids/README.md

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
-import { cloneArray } from '../core/utils';
+import { cloneArray, isEqual } from '../core/utils';
 import { DataUtil } from '../data-operations/data-util';
 import { IFilteringExpression, FilteringLogic } from '../data-operations/filtering-expression.interface';
 import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface';
@@ -13,6 +13,8 @@ import { IgxRowComponent } from './row.component';
 import { IFilteringOperation } from '../data-operations/filtering-condition';
 import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 import { Transaction, TransactionType } from '../services/index';
+import { ISortingStrategy } from '../data-operations/sorting-strategy';
+import { SortingStateDefaults } from '../data-operations/sorting-state.interface';
 /**
  *@hidden
  */
@@ -285,8 +287,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
             }
 
             //  if edit (new) value is same as old value do nothing here
-            if (oldValue !== undefined && oldValue === args.newValue) { return; }
-
+            if (oldValue !== undefined && isEqual(oldValue, args.newValue)) { return; }
             const transaction: Transaction = { id: rowID, type: TransactionType.UPDATE, newValue: { [column.field]: args.newValue } };
             if (grid.transactions.enabled) {
                 grid.transactions.add(transaction, rowData);
@@ -329,13 +330,13 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
         }
     }
 
-    public sort(id: string, fieldName: string, dir: SortingDirection, ignoreCase: boolean): void {
+    public sort(id: string, fieldName: string, dir: SortingDirection, ignoreCase: boolean, strategy: ISortingStrategy): void {
         if (dir === SortingDirection.None) {
             this.remove_grouping_expression(id, fieldName);
         }
         const sortingState = cloneArray(this.get(id).sortingExpressions);
-
-        this.prepare_sorting_expression([sortingState], { fieldName, dir, ignoreCase });
+        strategy = strategy ? strategy : this.getSortStrategyPerColumn(id, fieldName);
+        this.prepare_sorting_expression([sortingState], { fieldName, dir, ignoreCase, strategy });
         this.get(id).sortingExpressions = sortingState;
     }
 
@@ -346,6 +347,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
             if (each.dir === SortingDirection.None) {
                 this.remove_grouping_expression(id, each.fieldName);
             }
+            each.strategy = each.strategy ? each.strategy : this.getSortStrategyPerColumn(id, each.fieldName);
             this.prepare_sorting_expression([sortingState], each);
         }
 
@@ -494,4 +496,9 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
 
     protected remove_grouping_expression(id, fieldName) {
         }
+
+    protected getSortStrategyPerColumn(id: string, fieldName: string) {
+        return this.get_column_by_name(this.get(id).id, fieldName) ?
+            this.get_column_by_name(id, fieldName).sortStrategy : undefined;
+    }
 }

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -526,21 +526,17 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
         if (this.selected) {
             return;
         }
-        const editRowState = this.grid.rowEditable ? this.gridAPI.get_edit_row_state(this.gridID) : null; // Get current editted row
-        const inEditRow = this.belongsToEditRow; // Check if cell is in current editable mode, if any
+        const editRowState = this.grid.rowEditable ? this.gridAPI.get_edit_row_state(this.gridID) : null; // Get current edited row
         this._clearCellSelection();
         this._saveCellSelection();
         const hasFilteredResults = this.grid.filteredData ? this.grid.filteredData.length > 0 : true;
         if (hasFilteredResults) {
             if (this.column.editable && this.previousCellEditMode && hasFilteredResults) {
                 this.inEditMode = true;
             }
-            if (editRowState) { // If there is a row being edited
-                if (inEditRow && !this.column.editable) { // and this cell is in the row and is NOT editable, submit the values and close
-                    this.exitRowEdit(true, true, editRowState);
-                } else if (!inEditRow) { // or this is not in the editted row
-                    this.exitRowEdit(true, !this.column.editable, editRowState); // submit data and close the overlay depending on editable
-                }
+            if (editRowState && !this.inEditMode) {
+                // If there is a row being edited & this cell did not enter edit mode (!editable, row.deleted)
+                this.exitRowEdit(true, true, editRowState);
             }
             this.selected = true;
             if (fireFocus) {
@@ -550,14 +546,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
         }
     }
 
-    private get belongsToEditRow(): boolean { // If the cell belongs to the row that is currently being edited
-        const cellInEditMode = this.gridAPI.get_cell_inEditMode(this.gridID);
-        if (cellInEditMode && this.grid.rowEditable) {
-            return this.cellID.rowID === cellInEditMode.cellID.rowID;
-        }
-        return false;
-    }
-
+    /** TODO: Refactor away, move to grid.endRowEdit! */
     private exitRowEdit(commit = true, close = true, row?: {rowID: any, rowIndex: number}) {
         const grid = this.grid;
         if (grid.rowEditable) {