Merge branch 'master' into minor-updates

Author: kdinev

CHANGELOG.md

@@ -2,35 +2,53 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-## 12.2.0
+## 13.0.0
 
 ### New Features
-- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
-    - 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
-    - Introduced two new *cancellable* outputs related to CRUD - `rowDelete` and `rowAdd`. Both use an `IGridEditEventArgs` object as an event argument.
-        ```html
-        <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" (rowDelete)="rowDelete($event)" [autoGenerate]="true"></igx-grid>
-        ```
-- `igxTreeGrid`
-    - Added `TreeGridMatchingRecordsOnlyFilteringStrategy`, which allows you to display only the records matching particular filtering condition without any trace for their parents.
-- `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.
+- `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`
+    - Exposed new input `buttonText` which sets the text that is displayed inside the dropdown button in the toolbar.
 
 ### General
+
+- `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:
+
+    ```typescript
+    import { slideInBottom, slideOutTop } from 'igniteui-angular';
+
+    @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
+    public newPositionSettings: PositionSettings = {
+        openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
+        closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)'} })
+    };
+    this.alert.positionSettings = this.newPositionSettings;
+    ```
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
-    - 'oddRowCSS' and 'evenRowCSS' properties has been deprecated
-- `IgxForOf` - now takes margins into account when calculating the space that each element takes.
-    _Note:_ If your virtualized items contain margins, please calculate them into the `itemSize` value for the best possible initial virtualized state.
+    - **Breaking Change** - The following deprecated inputs have been removed
+        - Inputs  `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`,
+        `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`.
+        Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead.
+- `IgxColumnActionsComponent`
+    - **Breaking Change** - The following input has been removed
+        - Input `columns`. Use `igxGrid` `columns` input instead.        
+## 12.2.1
 
-## 12.1.6
+### New Features
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - new `rowPinned` event is emitted after a row is pinned/unpinned and grid has already refreshed its state to represent the pinned/unpinned rows in the DOM.
 
-## 12.1.6
+## 12.2.0
 
 ### New Features
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - 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
+    - Introduced two new *cancellable* outputs related to CRUD - `rowDelete` and `rowAdd`. Both use an `IGridEditEventArgs` object as an event argument.
+        ```html
+        <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" (rowDelete)="rowDelete($event)" [autoGenerate]="true"></igx-grid>
+        ```
     - Added two public methods that spawn the add row UI for an arbitrary record in the current data view. One that accepts a rowID to use as the row the UI spawns under and the other accepting an index that has a distinct implementation for `IgxTreeGrid`. Please, refer to the official documentation for more information: [Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-adding) and [Tree Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-adding).
 
         _Note:_ That the new record is still added at the end of the data view, after the end-user submits it.
@@ -43,21 +61,26 @@ All notable changes for each version of this project will be documented in this
         this.treeGrid.beginAddRowByIndex(10, true);     // spawns the add row UI to add a child for the row at index 10
         this.treeGrid.beginAddRowByIndex(null);         // spawns the add row UI as the first record
         ```
-
-## 12.1.3
-
-### New Features
-- `igxGrid`
     - Added `headerStyles` and `headerGroupStyles` inputs to the column component.
-    Similar to `cellStyles` is exposes a way to bind CSS properties and style the grid headers.
+        Similar to `cellStyles` is exposes a way to bind CSS properties and style the grid headers.
+- `igxTreeGrid`
+    - Added `TreeGridMatchingRecordsOnlyFilteringStrategy`, which allows you to display only the records matching particular filtering condition without any trace for their parents.
+- `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.2
-- `igxGrid`
+### General
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - 'oddRowCSS' and 'evenRowCSS' properties has been deprecated
     - The column formatter callback signature now accepts the row data as an additional argument:
-    ```typescript formatter(value: any, rowData?: any)```
-    The `rowData` argument may be `undefined` in remote scenarios/applying the callback on filtering labels
-    so make sure to check its availability.
+        ```typescript
+        formatter(value: any, rowData?: any)
+        ```
+        The `rowData` argument may be `undefined` in remote scenarios/applying the callback on filtering labels so make sure to check its availability.
+- `IgxForOf` - now takes margins into account when calculating the space that each element takes.
 
+    _Note:_ If your virtualized items contain margins, please calculate them into the `itemSize` value for the best possible initial virtualized state.
 - `IgxExcelExporterService`
     - Added support for freezing column headers in **Excel**. By default, the column headers would not be frozen but this behavior can be controlled by the `freezeHeaders` option of the IgxExcelExporterOptions object.
 

README.md

@@ -25,12 +25,10 @@ Ignite UI for Angular arrives with an extensive library of data visualizations t
 
 Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts. 
 
-### [**Install our VSCode Toolbox extension**](https://marketplace.visualstudio.com/items?itemName=Infragistics.igniteui-angular-toolbox)
-![](https://dl.infragistics.com/tools/extensions/angular-toolbox/toolbox.gif)
-### [**Install our VSCode tooltip extension**](https://marketplace.visualstudio.com/items?itemName=Infragistics.igniteui-angular-tooltips)
-![](https://dl.infragistics.com/tools/extensions/angular-tooltips/tooltip_preview.gif)
-
-**IMPORTANT** The repository has been renamed from `igniteui-js-blocks` to `igniteui-angular`. Read more on our new [naming convention](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-github-repo-name-changes).
+### Build Apps with Ignite UI for Angular faster using our [App Builder](https://www.infragistics.com/products/indigo-design/app-builder)
+![5661 drag drop](https://user-images.githubusercontent.com/1472513/132676597-09eec222-42f7-40ff-bd0d-fe8b91fd0c1c.gif)
+### Generate your Angular code projects using the [App Builder](https://www.infragistics.com/products/indigo-design/app-builder)
+![0871 change-preview-code](https://user-images.githubusercontent.com/1472513/132676607-3851f308-416b-45d6-99bc-c34266b55c44.gif)
 
 ### Current List of Components Include:
 

ROADMAP.md

@@ -2,30 +2,49 @@
 
 # Current Milestone
 
-## Milestone 18 (Due by Oct, 2021)
+## Milestone 19 (Due by Nov, 2021)
 
-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. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
-6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126)
+1. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
+2. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
+3. **DONE** Themes: Refactor Grid theme [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
+4. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103)
+5. Classes to indicate position of auto overlay [#9481](https://github.com/IgniteUI/igniteui-angular/issues/9481)
+6. onFilterDone property to expose additional information [#10243](https://github.com/IgniteUI/igniteui-angular/issues/10243)
+7. IgxCombo with single selection [#9832](https://github.com/IgniteUI/igniteui-angular/issues/9832)
 
 ## Going down the road
 
+# Due in 2021
+
 1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700)
-2. Grid Cell Merging
-3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
-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)
-8. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
+2. Grid grouping for an unbound field [#10223](https://github.com/IgniteUI/igniteui-angular/issues/10223)
+4. Grid autosize feature with performance improvements [#10205](https://github.com/IgniteUI/igniteui-angular/issues/10205)
+5. Column moving feature on grid level [#10176](https://github.com/IgniteUI/igniteui-angular/issues/10176)
+6. Grid summary custom templating [#7981](https://github.com/IgniteUI/igniteui-angular/issues/7981)
+7. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
+8. Improve sorting experience for users [#9674](https://github.com/IgniteUI/igniteui-angular/issues/9674)
 9. IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125)
 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)
+11. IgxGridState directive to save disableHiding property [#9304](https://github.com/IgniteUI/igniteui-angular/issues/9304)
+12. Template grid excel filter footer [#10183](https://github.com/IgniteUI/igniteui-angular/issues/10183)
+13. Igx Grid Sort Icon Change [#10217](https://github.com/IgniteUI/igniteui-angular/issues/10217)
+
+# Due in 2022
+
+1. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
+2. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
 
 # Previous Milestone
 
+## Milestone 18 (Released October 4th, 2021)
+
+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. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
+6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126)
+
 ## Milestone 17 (Released August 2nd, 2021)
 
 1. **[DONE]** Accordion component to Ignite UI for Angular [#9559](https://github.com/IgniteUI/igniteui-angular/issues/9559)

azure-pipelines.yml

@@ -1,5 +1,5 @@
 pool:
-  vmImage: 'Ubuntu 16.04'
+  vmImage: 'ubuntu-latest'
 
 steps:
 - script: npm ci

projects/igniteui-angular/package.json

@@ -88,7 +88,7 @@
         "web-animations-js": "^2.3.2"
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~12.2.820-alpha.0"
+        "@igniteui/angular-schematics": "~12.2.820"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json"

projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxCheckboxComponent } from './checkbox.component';
@@ -22,9 +22,10 @@ describe('IgxCheckbox', () => {
                 CheckboxExternalLabelComponent,
                 CheckboxInvisibleLabelComponent,
                 CheckboxDisabledTransitionsComponent,
+                CheckboxFormGroupComponent,
                 IgxCheckboxComponent
             ],
-            imports: [FormsModule, IgxRippleModule, NoopAnimationsModule]
+            imports: [FormsModule, ReactiveFormsModule, IgxRippleModule, NoopAnimationsModule]
         })
             .compileComponents();
     }));
@@ -34,7 +35,7 @@ describe('IgxCheckbox', () => {
         fixture.detectChanges();
 
         const checkbox = fixture.componentInstance.cb;
-        const nativeCheckbox = fixture.debugElement.query(By.css('input')).nativeElement;
+        const nativeCheckbox = checkbox.nativeCheckbox.nativeElement;
         const nativeLabel = checkbox.nativeLabel.nativeElement;
         const placeholderLabel = fixture.debugElement.query(By.css('.igx-checkbox__label')).nativeElement;
 
@@ -69,7 +70,7 @@ describe('IgxCheckbox', () => {
         fixture.detectChanges();
 
         expect(nativeCheckbox.checked).toBe(false);
-        expect(checkboxInstance.checked).toBe(false);
+        expect(checkboxInstance.checked).toBe(null);
 
         testInstance.subscribed = true;
         checkboxInstance.name = 'my-checkbox';
@@ -85,6 +86,22 @@ describe('IgxCheckbox', () => {
         expect(checkboxInstance.name).toEqual('my-checkbox');
     }));
 
+    it('Initializes with form group', () => {
+        const fixture = TestBed.createComponent(CheckboxFormGroupComponent);
+        fixture.detectChanges();
+
+        const testInstance = fixture.componentInstance;
+        const checkboxInstance = testInstance.cb;
+        const form = testInstance.myForm;
+
+        form.setValue({ checkbox: true });
+        expect(checkboxInstance.checked).toBe(true);
+
+        form.reset();
+
+        expect(checkboxInstance.checked).toBe(null);
+    });
+
     it('Initializes with external label', () => {
         const fixture = TestBed.createComponent(CheckboxExternalLabelComponent);
         const checkboxInstance = fixture.componentInstance.cb;
@@ -197,7 +214,7 @@ describe('IgxCheckbox', () => {
         fixture.detectChanges();
 
         // Should not update
-        expect(checkboxInstance.checked).toBe(false);
+        expect(checkboxInstance.checked).toBe(null);
         expect(testInstance.subscribed).toBe(false);
     });
 
@@ -398,3 +415,14 @@ class CheckboxInvisibleLabelComponent {
 class CheckboxDisabledTransitionsComponent {
     @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
 }
+
+@Component({
+    template: `<form [formGroup]="myForm"><igx-checkbox #cb formControlName="checkbox">Form Group</igx-checkbox></form>`
+})
+class CheckboxFormGroupComponent {
+    @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
+
+    public myForm = this.fb.group({ checkbox: [''] });
+
+    constructor(private fb: FormBuilder) {}
+}

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

@@ -428,9 +428,7 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
 
     /** @hidden @internal */
     public writeValue(value: boolean) {
-        if (typeof value === 'boolean') {
-            this._checked = value;
-        }
+        this._checked = value;
     }
 
     /** @hidden @internal */

projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss

@@ -64,14 +64,12 @@
         font-size: $igx-icon-font-size;
         color: --var($theme, 'color');
 
+        div,
         svg {
+            display: block;
             width: inherit;
             height: inherit;
             fill: currentColor;
-
-            use {
-                pointer-events: none;
-            }
         }
     }
 

projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts

@@ -345,7 +345,7 @@ describe('Dialog', () => {
         fix.detectChanges();
 
         dialog.open();
-        tick();
+        tick(16);
         fix.detectChanges();
 
         overlaydiv = document.getElementsByClassName(OVERLAY_MAIN_CLASS)[0];