Merge remote-tracking branch 'origin/master' into pivot-grid-master

Author: dkamburov

.browserslistrc

@@ -9,4 +9,4 @@
 last 2 versions
 Firefox ESR
 not dead
-IE 11 # For IE 9-11 support, remove 'not'.
+

.eslintrc.json

@@ -16,8 +16,7 @@
         "createDefaultProgram": true
       },
       "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
@@ -36,7 +35,7 @@
         "@typescript-eslint/consistent-type-definitions": "error",
         "@typescript-eslint/dot-notation": "off",
         "@typescript-eslint/explicit-member-accessibility": [
-          "warn",
+          "error",
           {
             "accessibility": "explicit",
             "overrides": {

.github/CONTRIBUTING.md

@@ -170,17 +170,27 @@ Write migrations.
 
 ## Deprecating methods
 When a method is deprecated a few steps have to be done:
-1. Add deprecation warning message by decorating the method with `@DeprecateMethod` decorator from `deprecateDecorators.ts` file.
+1. Add the `@deprecated` tag at the begging of the method description followed by the version in which the method has been deprecated and what can be used instead. Example:
+```ts
+/**
+ * @deprecated in version 12.1.0. Use 'data' instead
+ *
+ * The data record that populates the row
+ */
+public getRowData(): any {
+    return this.data;
+}
+```
 2. Ensure that the deprecated method is no longer used in IgniteUI for Angular codebase, samples and documentation snippets.
 3. Write migrations.
 
 ## Deprecating class properties
 When a class property is deprecated a few steps have to be done:
-1. Add deprecation warning message by decorating the property with `@DeprecateProperty` decorator from `deprecateDecorators.ts` file.
+1. Add the `@deprecated` tag at the begging of the property description followed by the version in which the property has been deprecated and what can be used instead.
 2. Ensure that the deprecated property is no longer used in IgniteUI for Angular codebase, samples and documentation snippets.
 3. Write migrations.
 
-NOTE: TypeScript disallows decorating both the get and set accessor for a single member. Instead, all decorators for the member must be applied to the first accessor specified in document order. This is because decorators apply to a Property Descriptor, which combines both the get and set accessor, not each declaration separately.
+NOTE: TypeScript disallows adding descriptions to both the get and set accessor for a single member. Instead, the description for the member must be applied to the first accessor specified in document order. Having this in mind the `@deprecated` tag is applied only once.
 
 # Testing a PR
 In order to test a pull request that is awaiting test, perform the following actions.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: ''
-labels: 'bug'
+labels: ':bug: bug'
 assignees: ''
 projects: 'IgniteUI/16'
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,7 +2,7 @@
 name: Feature request
 about: Suggest an idea for this project
 title: ''
-labels: 'feature-request'
+labels: ':toolbox: feature-request'
 assignees: ''
 projects: IgniteUI/16
 

.github/ISSUE_TEMPLATE/question.md

@@ -2,7 +2,7 @@
 name: Question
 about: Get general information or clarification
 title: ''
-labels: 'question'
+labels: ':question: question'
 assignees: ''
 projects: IgniteUI/16
 
@@ -12,4 +12,4 @@ projects: IgniteUI/16
 I have an issue with "x" and I'm not sure if I'm doing it right.
 
  * igniteui-angular version: 
- * browser: 
+ * browser: 

.github/workflows/nodejs.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x]
 
     steps:
       - name: Checkout
@@ -47,16 +47,9 @@ jobs:
       - name: Build i18n & validate output
         run: |
             npm run build:i18n
-            npm run lint:i18n:dist
-      - name: Install coverage combiner - istanbul
-        if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '14.x'
-        run: npm install -g istanbul
-      - name: Combine scripts
-        if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '14.x'
-        run: istanbul report --dir coverage --include coverage/**/coverage-final.json lcov
+            npm run test:i18n:dist
       - name: Publish to coveralls.io
         if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '14.x'
         uses: coverallsapp/[email protected]
         with:
             github-token: ${{ github.token }}
-

.github/workflows/npm-publish.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 14
           cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
       - run: echo "VERSION=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV

.gitignore

@@ -6,6 +6,8 @@
 /tmp
 /out-tsc
 
+.angular/*
+
 # dependencies
 /node_modules
 
@@ -27,6 +29,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

CHANGELOG.md

@@ -20,6 +20,28 @@ All notable changes for each version of this project will be documented in this
 
     - For more information, check out the [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/stepper/README.md), [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Stepper-Specification) and [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper).
 
+- Added `IgxFocusTrap` directive, which traps the Tab key focus within an element.
+
+    ```html
+   <div #wrapper [igxFocusTrap]="true" tabindex="0">
+        <input type="text" placeholder="Enter Username" name="uname">
+        <input type="password" placeholder="Enter Password" name="psw">
+        <button>SIGN IN</button>
+    </div>
+    ```
+
+- Added `IgxSimpleComboComponent`
+    - The `igx-simple-combo` which is a modification of the `igx-combo` component that allows single selection and has the appropriate UI and behavior for that. It inherits most of the `igx-combo`'s API.
+    - Allows the selection of single items in a filterable list.
+    - Supports custom values, keyboard navigation, validation, customized positioning of the item list via overlay settings.
+    - Example:
+    ```html
+    <igx-simple-combo [(ngModel)]="item" [allowCustomValues]="true" [placeholder]="'Search'" [data]="items">
+        <label igxLabel>Items</label>
+        <igx-hint>Please select an item from the dropdown list.</igx-hint>
+    </igx-simple-combo>
+    ```
+
 - `IgxCsvExporterService`, `IgxExcelExporterService`
     - Exporter services are no longer required to be provided in the application since they are now injected on a root level.
 - `IgxGridToolbarPinningComponent`, `IgxGridToolbarHidingComponent`
@@ -31,9 +53,18 @@ All notable changes for each version of this project will be documented in this
          - `dragLeave`
          - `dragDrop`
          - `dragOver`
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added new directives for re-templating header sorting indicators - `IgxSortHeaderIconDirective`, `IgxSortAscendingHeaderIconDirective` and `IgxSortDescendingHeaderIconDirective`.
+- `IgxDialog`
+    - Added `focusTrap` input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to `true`.
 
 ### General
 
+- `IE discontinued support` **Breaking Change** [details](https://angular.io/guide/browser-support)
+    - `web-animations-js` is removed as Peer Dependency.
+    - Removed IE from `.browserslistrc`
+    - Removed IE related `polyfills`, like Importing ES7 polyfill for Object (`'core-js/es7/object'`) for IE is no longer used.
+
 - `IgxDialog`
     - **Breaking Change** - The default positionSettings open/close animation has been changed to `fadeIn`/`fadeOut`. The open/close animation can be set through the position settings, e.g. change the animation to the previously default open/close animation:
 
@@ -52,11 +83,31 @@ All notable changes for each version of this project will be documented in this
         - Inputs  `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`,
         `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`.
         Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead.
-- `igxGrid`
+    - **Breaking Change** - The `rowSelected` event is renamed to `rowSelectionChanging` to better reflect its function.
+    - **Breaking Change** - The `columnSelected` event is renamed to `columnSelectionChanging` to better reflect its function.
+    - **Breaking Change** - `columnsCollection` is removed. Use `columns` instead. If at certain ocasions `columns` return empty array, query the columns using `ViewChildren` and access those in `ngAfterViewInit`:
+    ```ts
+    @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
+    public columns: QueryList<IgxColumnComponent>;
+    ```
+    - `RowType`, `IgxRowDirective`
+        - **Breaking Change** - `rowData` and `rowID` deprecated properties are now removed. Use `data` and `key` instead. Use `ng update` for automatic migration.
+    - `igxRowSelector`
+        - `rowID` in the context object of the `igxRowSelector` is now deprecated and will be removed in future version. Use `key` property instead:
+        ```html
+        <igx-grid [data]="data", [rowSelection]="'multiple'" primaryKey="ID">
+            <igx-column field="Name"></igx-column>
+            <igx-column field="Age"></igx-column>
+
+            <ng-template igxRowSelector let-rowContext>
+                <span>{{ rowContext.key }}</span>
+            </ng-template>
+        </igx-grid>
+        ```
+    - `IgxColumnActionsComponent`
+        - **Breaking Change** -  Input `columns` has been removed. Use `igxGrid` `columns` input instead.
+    - `igxGrid`
     - Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. Please, refer to the [Group By ](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby) topic for more information.
-- `IgxColumnActionsComponent`
-    - **Breaking Change** - The following input has been removed
-        - Input `columns`. Use `igxGrid` `columns` input instead.
 - `IgxCarousel`
     - **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`.
 
@@ -65,7 +116,7 @@ All notable changes for each version of this project will be documented in this
 ### General
 - **Breaking Change** - `IgxPercentSummaryOperand` and `IgxCurrencySummaryOperand` have been removed and `IgxNumberSummaryOperand` should be used instead. If you have used the percent or currency summary operands to extend a custom summary operand from them, then change the custom operand to extend from the number summary operand.
 - `IgxToastComponent`
-    - **Deprecated** - The `position` input property has been deprecated. Use `positionSettings` input instead.   
+    - **Deprecated** - The `position` input property has been deprecated. Use `positionSettings` input instead.
 ## 12.2.1
 
 ### New Features
@@ -3690,4 +3741,4 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
     - `IgxDraggableDirective` moved inside `../directives/dragdrop/` folder
     - `IgxRippleDirective` moved inside `../directives/ripple/` folder
     - Folder `"./navigation/nav-service"` renamed to `"./navigation/nav.service"`
-    
+