Merge pull request #10716 from IgniteUI/13.0.x

Merging 13.0.x into master

Author: Lipata

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 13.0.5
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added `dataCloneStrategy` input, which allows users provide their own implementation of how data objects are cloned when row and/or batch editing is enabled. The custom strategy should implement the `IDataCloneStrategy` interface.
+
 ## 13.0.1
 
 ### New Features

projects/igniteui-angular/src/lib/carousel/carousel-base.ts

@@ -1,5 +1,5 @@
 import { AnimationBuilder, AnimationPlayer, AnimationReferenceMetadata, useAnimation } from '@angular/animations';
-import { EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { fadeIn } from '../animations/fade';
 import { slideInLeft } from '../animations/slide';
 import { mkenum } from '../core/utils';
@@ -49,7 +49,7 @@ export abstract class IgxCarouselComponentBase {
     /** @hidden */
     protected newDuration = 0;
 
-    constructor(private builder: AnimationBuilder) {
+    constructor(private builder: AnimationBuilder, private cdr: ChangeDetectorRef) {
     }
 
     /** @hidden */
@@ -86,6 +86,7 @@ export abstract class IgxCarouselComponentBase {
         if (this.animationStarted(this.enterAnimationPlayer)) {
             this.enterAnimationPlayer.reset();
             this.enterAnimationDone.emit();
+            this.cdr.markForCheck();
         }
     }
 
@@ -155,6 +156,7 @@ export abstract class IgxCarouselComponentBase {
             this.newDuration = 0;
             this.previousItem.previous = false;
             this.enterAnimationDone.emit();
+            this.cdr.markForCheck();
         });
         this.previousItem.previous = true;
         this.enterAnimationPlayer.play();

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

@@ -18,7 +18,8 @@ import {
     TemplateRef,
     ViewChild,
     ContentChild,
-    Injectable
+    Injectable,
+    ChangeDetectorRef
 } from '@angular/core';
 import { IgxIconModule } from '../icon/public_api';
 import { IBaseEventArgs, mkenum, PlatformUtil } from '../core/utils';
@@ -534,9 +535,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         this.restartInterval();
     }
 
-    constructor(private element: ElementRef, private iterableDiffers: IterableDiffers,
+    constructor(cdr: ChangeDetectorRef, private element: ElementRef, private iterableDiffers: IterableDiffers,
         builder: AnimationBuilder, private platformUtil: PlatformUtil) {
-        super(builder);
+        super(builder, cdr);
         this.differ = this.iterableDiffers.find([]).create(null);
     }
 

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -280,12 +280,12 @@
     %tabs-header-content {
         flex: 1 1 auto;
         overflow: hidden;
+        scroll-behavior: smooth;
     }
 
     %tabs-header-wrapper {
         position: relative;
         flex-grow: 1;
-        transition: transform .2s $tabs-animation-function;
 
         @if $bootstrap-theme or $indigo-theme {
             &::after {

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -494,7 +494,7 @@
         $warn: igx-color($palette, 'warn'),
         $error: igx-color($palette, 'error'),
         $surface: if($surface != #fff, $surface, #fff),
-        $grays: if($grays != rgba(0, 0, 0, .38), $grays, #000),
+        $grays: if($grays != #9e9e9e, $grays, #000),
     );
 
     @include igx-theme(
@@ -526,7 +526,7 @@
         $warn: igx-color($palette, 'warn'),
         $error: igx-color($palette, 'error'),
         $surface: if($surface != #fff, $surface, #222),
-        $grays: if($grays != rgba(0, 0, 0, .38), $grays, #fff),
+        $grays: if($grays != #9e9e9e, $grays, #fff),
     );
 
     @include igx-theme(
@@ -637,7 +637,7 @@
         $palette: igx-palette(
             $primary,
             $secondary,
-            $surface: if($surface != #f8f9fa, $surface, #222),
+            $surface: if($surface != white, $surface, #222),
             $grays: #fff
         ),
         $schema: $dark-bootstrap-schema,
@@ -691,7 +691,7 @@
         $palette: igx-palette(
             $primary,
             $secondary,
-            $surface: if($surface != #2a2b2f, $surface, #2a2b2f),
+            $surface: if($surface != white, $surface, #2a2b2f),
             $grays: #fff
         ),
         $schema: $dark-indigo-schema,

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

@@ -81,6 +81,22 @@ export const cloneHierarchicalArray = (array: any[], childDataKey: any): any[] =
     return result;
 };
 
+/**
+ * Creates an object with prototype from provided source and copies
+ * all properties descriptors from provided source
+ * @param obj Source to copy prototype and descriptors from
+ * @returns New object with cloned prototype and property descriptors
+ */
+export const copyDescriptors = (obj) => {
+    if (obj) {
+        return Object.create(
+            Object.getPrototypeOf(obj),
+            Object.getOwnPropertyDescriptors(obj)
+            );
+    }
+}
+
+
 /**
  * Deep clones all first level keys of Obj2 and merges them to Obj1
  *
@@ -164,7 +180,7 @@ export const uniqueDates = (columnValues: any[]) => columnValues.reduce((a, c) =
  * @returns true if provided variable is Object
  * @hidden
  */
-export const isObject = (value: any): boolean => value && value.toString() === '[object Object]';
+export const isObject = (value: any): boolean => !!(value && value.toString() === '[object Object]');
 
 /**
  * Checks if provided variable is Date

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

@@ -0,0 +1,11 @@
+import { cloneValue } from "../core/utils";
+
+export interface IDataCloneStrategy {
+    clone(data: any): any;
+}
+
+export class DefaultDataCloneStrategy implements IDataCloneStrategy {
+    public clone(data: any): any {
+        return cloneValue(data);
+    }
+}

projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts

@@ -20,6 +20,7 @@ import {
 import { IPagingState, PagingError } from './paging-state.interface';
 import { SampleTestData } from '../test-utils/sample-test-data.spec';
 import { Transaction, TransactionType, HierarchicalTransaction } from '../services/public_api';
+import { DefaultDataCloneStrategy } from './data-clone-strategy';
 
 /* Test sorting */
 const testSort = () => {
@@ -516,19 +517,21 @@ const testMerging = () => {
         });
 
         it('Should merge delete transactions correctly', () => {
+            const cloneStrategy = new DefaultDataCloneStrategy();
             const data = SampleTestData.personIDNameData();
             const secondRow = data[1];
             const transactions: Transaction[] = [
                 { id: 1, newValue: null, type: TransactionType.DELETE },
                 { id: 3, newValue: null, type: TransactionType.DELETE },
             ];
 
-            DataUtil.mergeTransactions(data, transactions, 'ID', true);
+            DataUtil.mergeTransactions(data, transactions, 'ID', cloneStrategy, true);
             expect(data.length).toBe(1);
             expect(data[0]).toEqual(secondRow);
         });
 
         it('Should merge add hierarchical transactions correctly', () => {
+            const cloneStrategy = new DefaultDataCloneStrategy();
             const data = SampleTestData.employeeSmallTreeData();
             const addRootRow = { ID: 1000, Name: 'Pit Peter', HireDate: new Date(2008, 3, 20), Age: 55 };
             const addChildRow1 = { ID: 1001, Name: 'Marry May', HireDate: new Date(2018, 4, 1), Age: 102 };
@@ -539,7 +542,7 @@ const testMerging = () => {
                 { id: addChildRow2.ID, newValue: addChildRow2, type: TransactionType.ADD, path: [addRootRow.ID] },
             ];
 
-            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', false);
+            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', cloneStrategy, false);
             expect(data.length).toBe(4);
 
             expect(data[3].Age).toBe(addRootRow.Age);
@@ -555,6 +558,7 @@ const testMerging = () => {
         });
 
         it('Should merge update hierarchical transactions correctly', () => {
+            const cloneStrategy = new DefaultDataCloneStrategy();
             const data = SampleTestData.employeeSmallTreeData();
             const updateRootRow = { Name: 'May Peter', Age: 13 };
             const updateChildRow1 = { HireDate: new Date(2100, 1, 12), Age: 1300 };
@@ -581,7 +585,7 @@ const testMerging = () => {
                 },
             ];
 
-            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', false);
+            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID',cloneStrategy, false);
             expect(data[1].Name).toBe(updateRootRow.Name);
             expect(data[1].Age).toBe(updateRootRow.Age);
 
@@ -593,6 +597,7 @@ const testMerging = () => {
         });
 
         it('Should merge delete hierarchical transactions correctly', () => {
+            const cloneStrategy = new DefaultDataCloneStrategy();
             const data = SampleTestData.employeeSmallTreeData();
             const transactions: HierarchicalTransaction[] = [
                 //  root row with no children
@@ -605,7 +610,7 @@ const testMerging = () => {
                 { id: data[0].Employees[2].ID, newValue: null, type: TransactionType.DELETE, path: [data[0].ID] }
             ];
 
-            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', true);
+            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', cloneStrategy, true);
 
             expect(data.length).toBe(1);
             expect(data[0].Employees.length).toBe(1);

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -8,7 +8,7 @@ import { IGroupByKey } from './groupby-expand-state.interface';
 import { IGroupByRecord } from './groupby-record.interface';
 import { IGroupingState } from './groupby-state.interface';
 import { FilteringStrategy } from './filtering-strategy';
-import { cloneValue, mergeObjects, mkenum } from '../core/utils';
+import { mergeObjects, mkenum } from '../core/utils';
 import { Transaction, TransactionType, HierarchicalTransaction } from '../services/transaction/transaction';
 import { getHierarchy, isHierarchyMatch } from './operations';
 import { GridType } from '../grids/common/grid.interface';
@@ -21,6 +21,7 @@ import {
     IgxSorting,
     IgxGrouping
 } from '../grids/common/strategy';
+import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations/data-clone-strategy';
 
 /**
  * @hidden
@@ -147,12 +148,12 @@ export class DataUtil {
      * @param deleteRows Should delete rows with DELETE transaction type from data
      * @returns Provided data collections updated with all provided transactions
      */
-    public static mergeTransactions<T>(data: T[], transactions: Transaction[], primaryKey?: any, deleteRows: boolean = false): T[] {
+    public static mergeTransactions<T>(data: T[], transactions: Transaction[], primaryKey?: any, cloneStrategy: IDataCloneStrategy = new DefaultDataCloneStrategy(), deleteRows: boolean = false): T[] {
         data.forEach((item: any, index: number) => {
             const rowId = primaryKey ? item[primaryKey] : item;
             const transaction = transactions.find(t => t.id === rowId);
             if (transaction && transaction.type === TransactionType.UPDATE) {
-                data[index] = transaction.newValue;
+                data[index] = mergeObjects(cloneStrategy.clone(data[index]), transaction.newValue);
             }
         });
 
@@ -189,6 +190,7 @@ export class DataUtil {
         transactions: HierarchicalTransaction[],
         childDataKey: any,
         primaryKey?: any,
+        cloneStrategy: IDataCloneStrategy = new DefaultDataCloneStrategy(),
         deleteRows: boolean = false): any[] {
         for (const transaction of transactions) {
             if (transaction.path) {
@@ -205,7 +207,7 @@ export class DataUtil {
                     case TransactionType.UPDATE:
                         const updateIndex = collection.findIndex(x => x[primaryKey] === transaction.id);
                         if (updateIndex !== -1) {
-                            collection[updateIndex] = mergeObjects(cloneValue(collection[updateIndex]), transaction.newValue);
+                            collection[updateIndex] = mergeObjects(cloneStrategy.clone(collection[updateIndex]), transaction.newValue);
                         }
                         break;
                     case TransactionType.DELETE:

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts

@@ -225,7 +225,8 @@ export class IgxExpansionPanelComponent extends ToggleAnimationPlayer implements
      * ```
      */
     public collapse(evt?: Event) {
-        if (this.collapsed) { // If expansion panel is already collapsed, do nothing
+        // If expansion panel is already collapsed or is collapsing, do nothing
+        if (this.collapsed || this.closeAnimationPlayer) {
             return;
         }
         const args = { event: evt, panel: this, owner: this, cancel: false };