Merge branch 'master' into mdragnev/fix-9994

Author: ChronosSF

CHANGELOG.md

@@ -24,7 +24,10 @@ All notable changes for each version of this project will be documented in this
         ```
     - Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
     - Introduced new 'rowStyles' and 'rowClasses' grid properties which allows to define a custom styling on each grid row
-
+- `IgxSnackbarComponent`
+    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
+- `IgxToastComponent`
+    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
 ## 12.1.3
 
 ### New Features

README.md

@@ -4,6 +4,7 @@
 [![Build Status](https://dev.azure.com/IgniteUI/igniteui-angular/_apis/build/status/IgniteUI.igniteui-angular)](https://dev.azure.com/IgniteUI/igniteui-angular/_build/latest?definitionId=3)
 [![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-angular/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-angular?branch=master)
 [![npm version](https://badge.fury.io/js/igniteui-angular.svg)](https://badge.fury.io/js/igniteui-angular)
+[![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
 
 [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits, supporting directives for [Angular](https://angular.io/) by Infragistics. Ignite UI for Angular is designed to enable developers to build enterprise-ready, high-performance HTML5 & JavaScript apps for modern desktop browsers. With the use of all features, the world’s fastest Angular grid, 60+ real-time Angular charts, and more, you are empowered to engineer excellent mobile experiences and deliver progressive web apps (PWA’s) targeting Google's Angular framework. 
 

ROADMAP.md

@@ -4,11 +4,16 @@
 
 ## Milestone 18 (Due by Oct, 2021)
 
-1. Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675)
-2. Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969)
-3. Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863)
-4. Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516)
+1. **[DONE]** Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675)
+2. **[DONE]** Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969)
+3. **[DONE]** Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863)
+4. **[DONE]** Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516)
 5. IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
+6. IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125)
+7. IgxCsvExporterService: Support multi-column headers export [#10078](https://github.com/IgniteUI/igniteui-angular/issues/10078)
+8. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126)
+9. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
+10. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064)
 
 ## Going down the road
 
@@ -18,15 +23,16 @@
 4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
 5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
 6. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
+7. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103)
 
 # Previous Milestone
 
 ## Milestone 17 (Released August 2nd, 2021)
 
-1.  **[DONE]** Accordion component to Ignite UI for Angular [#9559](https://github.com/IgniteUI/igniteui-angular/issues/9559)
+1. **[DONE]** Accordion component to Ignite UI for Angular [#9559](https://github.com/IgniteUI/igniteui-angular/issues/9559)
 2. **[DONE]** Expose a column input for passing additional data/state in the template contexts of the column [#9020](https://github.com/IgniteUI/igniteui-angular/issues/9020)
-3.  **[DONE]** Expose a new cell-like object API for the data grids [#9555](https://github.com/IgniteUI/igniteui-angular/issues/9555)
-4.  **[DONE]** Change the way igxGrid allows using the igxPaginator [#9097](https://github.com/IgniteUI/igniteui-angular/issues/9097)
+3. **[DONE]** Expose a new cell-like object API for the data grids [#9555](https://github.com/IgniteUI/igniteui-angular/issues/9555)
+4. **[DONE]** Change the way igxGrid allows using the igxPaginator [#9097](https://github.com/IgniteUI/igniteui-angular/issues/9097)
 5. **[DONE]** Tree Grid Grouping Pipe and Group Area [#9184](https://github.com/IgniteUI/igniteui-angular/issues/9184)
 6. **[DONE]** Grid Multi Column Headers to exported excel [#6288](https://github.com/IgniteUI/igniteui-angular/issues/6288)
 7. **[DONE]** Snackbar IToggleView [#9677](https://github.com/IgniteUI/igniteui-angular/issues/9677)

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss

@@ -1,5 +1,6 @@
 %display-container {
     display: inherit;
+    flex-flow: inherit;
     position: relative;
     width: 100%;
     overflow: hidden;

projects/igniteui-angular/src/lib/directives/notification/notifications.directive.ts

@@ -64,7 +64,7 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective
      * @hidden
      * @internal
      */
-    public textMessage: string | OverlaySettings = '';
+    public textMessage = '';
 
     /**
      * @hidden

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html

@@ -2,7 +2,8 @@
     tabindex="0"
     [ngClass]="clearFilterClass()"
     (keydown)="onClearFilterKeyDown($event)"
-    (click)="clearFilter()">
+    (click)="clearFilter()"
+    role="menuitem">
     <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>
     <igx-icon>clear</igx-icon>
 </div>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html

@@ -3,7 +3,9 @@
         class="igx-excel-filter__actions-filter"
         (keydown)="onTextFilterKeyDown($event)"
         (click)="onTextFilterClick($event)"
-        [igxDropDownItemNavigation]="subMenu">
+        [igxDropDownItemNavigation]="subMenu"
+        role="menuitem"
+        aria-haspopup="true">
         <span>{{ subMenuText }}</span>
         <igx-icon>keyboard_arrow_right</igx-icon>
     </div>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.html

@@ -1,7 +1,8 @@
 <div *ngIf="esf.column"
     class="igx-excel-filter__actions-hide"
     tabindex="0"
-    (click)="esf.onHideToggle()">
+    (click)="esf.onHideToggle()"
+    role="menuitem">
     <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>
     <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>
 </div>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.html

@@ -1,7 +1,8 @@
 <div *ngIf="esf.column"
     [ngClass]="esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'"
     (click)="esf.onPin()"
-    tabindex="0">
+    tabindex="0"
+    role="menuitem">
     <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>
     <igx-icon family="imx-icons" name="{{ esf.column.pinned ? 'unpin-left' : 'pin-left' }}"></igx-icon>
 </div>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.html

@@ -1,7 +1,9 @@
 <div *ngIf="esf.column"
     [ngClass]="esf.selectedClass()"
     tabindex="0"
-    (click)="esf.onSelect()">
+    (click)="esf.onSelect()"
+    role="button"
+    [attr.aria-pressed]="esf.column.selected">
     <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>
     <igx-icon>done</igx-icon>
 </div>