Merge branch 'master' into ibarakov/fix-8247-master

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

Author: onlyexeption

CHANGELOG.md

@@ -30,23 +30,25 @@ All notable changes for each version of this project will be documented in this
     - `onOpening` and `onClosing` events are emitting now arguments of `ToggleViewCancelableEventArgs` type.
 - `IgxSelect`
     - Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
-- `IgxDatePicker`	
+- `IgxDatePicker`
     - **Breaking Change** - Deprecated the `label` property.
     - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
 - `igxNavigationDrawer`
     - Added `disableAnimation` property which enables/disables the animation, when toggling the drawer. Set to `false` by default.
 - `igxTabs`
     - Added `disableAnimation` property which enables/disables the transition animation of the tabs' content. Set to `false` by default.
 - `IgxExpansionPanel`
-    - `IExpansionPanelEventArgs.panel` - Deprecated. Usе `owner` property to get a reference to the panel. 
+    - `IExpansionPanelEventArgs.panel` - Deprecated. Usе `owner` property to get a reference to the panel.
+- `IgxCalendarComponent`, `IgxMonthsViewComponent` and `IgxYearsViewComponent`
+    - `tabIndex` property was removed  in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the `IgxMonthsViewComponent` and `IgxYearsViewComponent`;
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
     - `cellEditExit` is a new event that fires when cell exits edit mode
     - `rowEditExit` is a new event that fires when row exits edit mode
     - Added *getRowData(rowSelector)* method that returns an object that represents the data that is contained in the specified row component.
-    - Added ability to spawn row adding UI through exoposed methods. Note that rowEditing should be enabled.
+    - Added ability to spawn row adding UI through exposed methods. Note that rowEditing should be enabled.
         - `beginAddRow` method which starts the adding row UI.
         - `beginAddChild` method which starts the adding child UI.
         ```typescript
@@ -61,6 +63,22 @@ All notable changes for each version of this project will be documented in this
             </igx-action-strip>
         </igx-tree-grid>
         ```
+    - A new `locale` and `pipeArgs` parameters are introduced in the `operate` method exposed by the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`, which exposes the grid locale. Use the `locale` parameter to get localized summary data (as per the grid locale. If not passed, `locale` defaults to `'en-US'`). Use the `pipeArgs` parameter only if you want to customize the format of the date and numeric values that will be returned.
+    ```typescript
+    class MySummary extends IgxDateSummaryOperand {
+        operate(columnData: any[], allData = [], fieldName, locale: string, pipeArgs: IColumnPipeArgs): IgxSummaryResult[] {
+            const pipeArgs: IColumnPipeArgs = {
+                format: 'longDate',
+                timezone: 'UTC',
+                digitsInfo: '1.1-2'
+            }
+            const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
+            return result;
+        }
+    }
+    ```  
+    - A new `pipeArgs` input property is exposed by the `IgxColumnComponent`, which is used to pass arguments to the Angular `DatePipe` and `DecimalPipe`, to format the display for date and numeric columns.
+    ```typescript
 - ` IGX_INPUT_GROUP_TYPE` injection token
     - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`.
 - ` IgxExcelExporterService`
@@ -73,6 +91,19 @@ All notable changes for each version of this project will be documented in this
 - `IgxOverlay`
     - The `PositionSettings` `target` property has been deprecated and moved to `OverlaySettings`.
     - An optional Point/HTML Element parameter `target` has been added to the `position()` method
+    - Added `createAbsoluteOverlaySettings` and `createRelativeOverlaySettings` methods which create non-modal `OverlaySettings` based on predefined `PositionSettings`. The methods are exposed off the `IgxOverlayService`.
+        - `createAbsoluteOverlaySettings` creates non-modal `OverlaySettings` with `GlobalPositionStrategy` or `ContainerPositionStrategy` if an outlet is provided. Accepts `AbsolutePosition` enumeration, which could be `Center`, `Top` and `Bottom`. Default is `Center`.
+        ```typescript
+            const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);
+        ```
+        - `createRelativeOverlaySettings` creates `OverlaySettings` with `AutoPositionStrategy`, `ConnectedPositioningStrategy` or `ElasticPositionStrategy`. Accepts target, strategy and position. The `target` is the attaching point or element for the component to show. The position strategy is a `RelativePositionStrategy` enumeration, which defaults to `Auto`. The position is a `RelativePosition` enumeration. Possible values are `Above`, `Below`, `Before`, `After` and `Default`. The default option is `Default`, which positions the element below the target, left aligned.
+        ```typescript
+            const targetElement = this.button.nativeElement;
+            const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
+                    targetElement,
+                    RelativePositionStrategy.Connected,
+                    RelativePosition.Above);
+        ```
 - `IgxToast`
     - The component now utilizes the `IgxOverlayService` to position itself in the DOM.
     - An additional input property `outlet` has been added to allow users to specify custom Overlay Outlets using the `IgxOverlayOutletDirective`;

package-lock.json

@@ -52,7 +52,7 @@
     "@angular/platform-browser": "^10.1.0",
     "@angular/platform-browser-dynamic": "^10.1.0",
     "@angular/router": "^10.1.0",
-    "@igniteui/material-icons-extended": "^2.3.0",
+    "@igniteui/material-icons-extended": "^2.4.0",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
@@ -61,6 +61,7 @@
     "igniteui-trial-watermark": "^1.0.3",
     "jszip": "^3.5.0",
     "lodash.merge": "^4.6.2",
+    "uuid": "^8.3.0",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.6.3",
     "setimmediate": "^1.0.5",

package.json

@@ -1,18 +1,21 @@
-import { SchematicContext, Tree, FileVisitor } from '@angular-devkit/schematics';
-import { WorkspaceSchema } from '@schematics/angular/utility/workspace-models';
-
 import * as fs from 'fs';
 import * as path from 'path';
+import * as ts from 'typescript';
 import * as tss from 'typescript/lib/tsserverlibrary';
+import { SchematicContext, Tree, FileVisitor } from '@angular-devkit/schematics';
+import { WorkspaceSchema } from '@schematics/angular/utility/workspace-models';
 import {
     ClassChanges, BindingChanges, SelectorChange,
     SelectorChanges, ThemePropertyChanges, ImportsChanges, MemberChanges
 } from './schema';
 import {
     getLanguageService, getRenamePositions, findMatches,
-    replaceMatch, createProjectService, isMemberIgniteUI
+    replaceMatch, createProjectService, isMemberIgniteUI, NG_LANG_SERVICE_PACKAGE_NAME
 } from './tsUtils';
-import { getProjectPaths, getWorkspace, getProjects, escapeRegExp } from './util';
+import {
+    getProjectPaths, getWorkspace, getProjects, escapeRegExp,
+    getPackageManager, canResolvePackage, tryInstallPackage, tryUninstallPackage
+} from './util';
 import { ServerHost } from './ServerHost';
 
 export enum InputPropertyType {
@@ -82,14 +85,23 @@ export class UpdateChanges {
         return this._sassFiles;
     }
 
-    private _service: tss.LanguageService;
-    public get service(): tss.LanguageService {
+    private _service: ts.LanguageService;
+    public get service(): ts.LanguageService {
         if (!this._service) {
             this._service = getLanguageService(this.tsFiles, this.host);
         }
         return this._service;
     }
 
+    private _packageManager: 'npm' | 'yarn';
+    private get packageManager(): 'npm' | 'yarn' {
+        if (!this._packageManager) {
+            this._packageManager = getPackageManager(this.host);
+        }
+
+        return this._packageManager;
+    }
+
     /**
      * Create a new base schematic to apply changes
      * @param rootPath Root folder for the schematic to read configs, pass __dirname
@@ -111,16 +123,27 @@ export class UpdateChanges {
 
     /** Apply configured changes to the Host Tree */
     public applyChanges() {
+        const shouldInstallPkg = this.membersChanges && this.membersChanges.changes.length
+            && !canResolvePackage(NG_LANG_SERVICE_PACKAGE_NAME);
+        if (shouldInstallPkg) {
+            this.context.logger.info(`Installing temporary migration dependencies via ${this.packageManager}.`);
+            tryInstallPackage(this.context, this.packageManager, NG_LANG_SERVICE_PACKAGE_NAME);
+        }
+
         this.updateTemplateFiles();
         this.updateTsFiles();
         this.updateMembers();
-
         /** Sass files */
         if (this.themePropsChanges && this.themePropsChanges.changes.length) {
             for (const entryPath of this.sassFiles) {
                 this.updateThemeProps(entryPath);
             }
         }
+
+        if (shouldInstallPkg) {
+            this.context.logger.info(`Cleaning up temporary migration dependencies.`);
+            tryUninstallPackage(this.context, this.packageManager, NG_LANG_SERVICE_PACKAGE_NAME);
+        }
     }
 
     /** Add condition function. */