Merge branch 'master' into mkirova/fix-10664

Author: kdinev

CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 13.1.0
+### New Features
+- `igxTooltipTarget` directive now allows specifying a plain text tooltip without adding an additional DOM element decorated with the `igxTooltip` directive. This is achieved via the newly introduced `tooltip` string input.
+    ```html
+    <button igxTooltipTarget [tooltip]="'Infragistics Inc. HQ'">
+       info
+    </button>
+    ```
+### General
+
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    -  **Breaking Change** - `movable` property of `IgxColumnComponent` is now deprecated and will be removed in future version. Instead, use the newly exposed `moving` property on grid-level:
+    ```html
+    <igx-grid [data]="data" [moving]="true">
+        <igx-column field="Name"></igx-column>
+        <igx-column field="Age"></igx-column>
+    </igx-grid>
+   ```
+
+## 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/migrations/migration-collection.json

@@ -110,6 +110,11 @@
             "version": "13.0.0-alpha",
             "description": "Updates Ignite UI for Angular from v12.2.x to v13.0.0",
             "factory": "./update-13_0_0"
+        },
+        "migration-23": {
+            "version": "13.1.0",
+            "description": "Updates Ignite UI for Angular from v13.0.x to v13.1.0",
+            "factory": "./update-13_1_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-13_1_0/index.spec.ts

@@ -0,0 +1,87 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '13.1.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    const migrationName = 'migration-23';
+
+    it('should remove columns` movable prop and enable grid`s moving prop if there is movable columns', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.html`,
+            `
+<igx-grid>
+  <igx-column [movable]="true"></igx-column>
+  <igx-column></igx-column>
+</igx-grid>
+`
+        );
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.html')
+        ).toEqual(
+            `
+<igx-grid [moving]="true">
+  <igx-column ></igx-column>
+  <igx-column></igx-column>
+</igx-grid>
+`
+        );
+    });
+
+    it('should remove columns` movable prop and don`t set the grid`s moving prop if there isn`t movable columns', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.html`,
+            `
+<igx-grid>
+  <igx-column [movable]="false"></igx-column>
+  <igx-column></igx-column>
+</igx-grid>
+`
+        );
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.html')
+        ).toEqual(
+            `
+<igx-grid>
+  <igx-column ></igx-column>
+  <igx-column></igx-column>
+</igx-grid>
+`
+        );
+    });
+
+
+});

projects/igniteui-angular/migrations/update-13_1_0/index.ts

@@ -0,0 +1,72 @@
+import { Element } from '@angular/compiler';
+import {
+  Rule,
+  SchematicContext,
+  Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+import { nativeImport } from '../common/import-helper.js';
+import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
+
+const version = '13.1.0';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+  context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+  const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+
+  const update = new UpdateChanges(__dirname, host, context);
+  const GRID_TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid', 'igx-row-island'];
+  const prop = ['[movable]'];
+  const changes = new Map<string, FileChange[]>();
+
+  const gridsToMigrate = new Set<any>();
+
+  const applyChanges = () => {
+    for (const [path, change] of changes.entries()) {
+      let buffer = host.read(path).toString();
+
+      change.sort((c, c1) => c.position - c1.position)
+        .reverse()
+        .forEach(c => buffer = c.apply(buffer));
+
+      host.overwrite(path, buffer);
+    }
+  };
+
+  const addChange = (path: string, change: FileChange) => {
+    if (changes.has(path)) {
+      changes.get(path).push(change);
+    } else {
+      changes.set(path, [change]);
+    }
+  };
+
+  // migrate movable on column-level to moving on grid-level for grid, tree grid, hierarchical grid and row island
+  for (const path of update.templateFiles) {
+    const grids = findElementNodes(parseFile(new HtmlParser(), host, path), GRID_TAGS);
+    grids.forEach(grid => {
+      const grid_elem = grid as Element;
+      const columns = grid_elem.children.filter(column => (column as Element).name === 'igx-column' && hasAttribute(column as Element, prop));
+      columns.map(node => getSourceOffset(node as Element))
+        .forEach(offset => {
+          const { startTag, file, node } = offset;
+          const { name, value } = getAttribute(node, prop)[0];
+          if (value === 'true') {
+            gridsToMigrate.add(grid_elem);
+          }
+          const repTxt = file.content.substring(startTag.start, startTag.end);
+          const property = `${name}="${value}"`;
+          const removePropTxt = repTxt.replace(property, '');
+          addChange(file.url, new FileChange(startTag.start, removePropTxt, repTxt, 'replace'));
+        });
+    });
+
+    Array.from(gridsToMigrate).map(node => getSourceOffset(node as Element)).forEach(offset => {
+      const { startTag, file } = offset;
+      addChange(file.url, new FileChange(startTag.end - 1, ' [moving]="true"'));
+    });
+  }
+
+  applyChanges();
+  changes.clear();
+};

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);
+    }
+}