Merge branch 'master' into dTsvetkov/fix-cell-styling-warnings

Author: zdrawku

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes for each version of this project will be documented in this
 
 ## 12.0.0
 
+### New Features
+- `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Behavioral Change** - Virtual containers now scroll smoothly when using the mouse wheel(s) to scroll them horizontally or vertically. This behavior more closely resembles the scrolling behavior of non-virtualized containers in most modern browsers.
+
+
 ### Themes:
 - Breaking Changes:
     - `IgxButton` theme has been simplified. The number of theme params (`igx-button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). See the migration guide to update existing button themes. Updates performed with `ng update` will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.
@@ -16,6 +21,8 @@ All notable changes for each version of this project will be documented in this
     ```
 
 
+
+
 ## 11.1.1
 
 ### New Features

projects/igniteui-angular/migrations/migration-collection.json

@@ -95,6 +95,11 @@
             "version": "11.1.0",
             "description": "Updates Ignite UI for Angular from v11.0.x to v11.1.0",
             "factory": "./update-11_1_0"
+        },
+        "migration-20": {
+            "version": "12.0.0",
+            "description": "Updates Ignite UI for Angular from v11.1.x to v12.0.0",
+            "factory": "./update-12_0_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-12_0_0/changes/theme-props.json

@@ -1,6 +1,41 @@
 {
     "$schema": "../../common/schema/theme-props.schema.json",
     "changes": [
+        {
+            "name": "$border-radius-round",
+            "replaceWith": "$border-radius",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$border-radius-square",
+            "replaceWith": "$border-radius",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$initials-background",
+            "replaceWith": "$background",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$initials-color",
+            "replaceWith": "$color",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$icon-background",
+            "replaceWith": "$background",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$icon-color",
+            "replaceWith": "$color",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$image-background",
+            "replaceWith": "$background",
+            "owner": "igx-avatar-theme"
+        },
         {
             "name": "$flat-border-radius",
             "replaceWith": "$border-radius",

projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts

@@ -0,0 +1,62 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update to 12.0.0', () => {
+    let appTree: UnitTestTree;
+    const runner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    const migrationName = 'migration-20';
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should update avatar theme args', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+`
+$theme: igx-avatar-theme(
+    $initials-background: white,
+    $icon-background: green,
+    $image-background: red,
+    $initials-color: black,
+    $icon-color: gold,
+    $border-radius-round: 14px,
+    $border-radius-square: 12px
+);
+`
+        );
+
+        const tree = await runner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.scss')
+        ).toEqual(
+`
+$theme: igx-avatar-theme(
+    $background: white,
+    $color: black,
+    $border-radius: 14px
+);
+`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-12_0_0/index.ts

@@ -0,0 +1,11 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '12.0.0';
+
+export default (): Rule => (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

projects/igniteui-angular/src/lib/chips/chip.component.html

@@ -37,9 +37,9 @@
 </div>
 
 <ng-template #defaultSelectIcon>
-    <igx-icon>done</igx-icon>
+    <igx-icon [attr.aria-label]="resourceStrings.igx_chip_select">done</igx-icon>
 </ng-template>
 
 <ng-template #defaultRemoveIcon>
-    <igx-icon>cancel</igx-icon>
+    <igx-icon [attr.aria-label]="resourceStrings.igx_chip_remove">cancel</igx-icon>
 </ng-template>

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -22,10 +22,11 @@ import {
     IDropDroppedEventArgs
 } from '../directives/drag-drop/drag-drop.directive';
 import { IBaseEventArgs } from '../core/utils';
+import { IChipResourceStrings } from '../core/i18n/chip-resources';
+import { CurrentResourceStrings } from '../core/i18n/resources';
 import { fromEvent } from 'rxjs';
 import { take, filter } from 'rxjs/operators';
 
-
 export interface IBaseChipEventArgs extends IBaseEventArgs {
     originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
     owner: IgxChipComponent;
@@ -91,6 +92,17 @@ export class IgxChipComponent extends DisplayDensityBase {
     @Input()
     public id = `igx-chip-${CHIP_ID++}`;
 
+    /**
+     * Returns the `role` attribute of the chip.
+     *
+     * @example
+     * ```typescript
+     * let chipRole = this.chip.role;
+     * ```
+     */
+    @HostBinding('attr.role')
+    public role = 'option';
+
     /**
      * An @Input property that sets the value of `tabindex` attribute. If not provided it will use the element's tabindex if set.
      *
@@ -240,6 +252,7 @@ export class IgxChipComponent extends DisplayDensityBase {
      * <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">
      * ```
      */
+    @HostBinding('attr.aria-selected')
     @Input()
     public set selected(newValue: boolean) {
         this.changeSelection(newValue);
@@ -298,6 +311,22 @@ export class IgxChipComponent extends DisplayDensityBase {
         return this.chipArea.nativeElement.style.backgroundColor;
     }
 
+    /**
+     * An accessor that sets the resource strings.
+     * By default it uses EN resources.
+     */
+    @Input()
+    public set resourceStrings(value: IChipResourceStrings) {
+        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+    }
+
+    /**
+     * An accessor that returns the resource strings.
+     */
+    public get resourceStrings(): IChipResourceStrings {
+        return this._resourceStrings;
+    }
+
     /**
      * Emits an event when the `IgxChipComponent` moving starts.
      * Returns the moving `IgxChipComponent`.
@@ -494,6 +523,7 @@ export class IgxChipComponent extends DisplayDensityBase {
     protected _selected = false;
     protected _selectedItemClass = 'igx-chip__item--selected';
     protected _movedWhileRemoving = false;
+    private _resourceStrings = CurrentResourceStrings.ChipResStrings;
 
     constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {

projects/igniteui-angular/src/lib/chips/chips-area.component.ts

@@ -84,6 +84,29 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
         return classes.join(' ');
     }
 
+    /**
+     * Returns the `role` attribute of the chips area.
+     *
+     * @example
+     * ```typescript
+     * let chipsAreaRole = this.chipsArea.role;
+     * ```
+     */
+     @HostBinding('attr.role')
+     public role = 'listbox';
+
+    /**
+     * Returns the `aria-label` attribute of the chips area.
+     *
+     * @example
+     * ```typescript
+     * let ariaLabel = this.chipsArea.ariaLabel;
+     * ```
+     *
+     */
+     @HostBinding('attr.aria-label')
+     public ariaLabel = 'chip area';
+
     /**
      * An @Input property that sets the width of the `IgxChipsAreaComponent`.
      *

projects/igniteui-angular/src/lib/core/i18n/chip-resources.ts

@@ -0,0 +1,9 @@
+export interface IChipResourceStrings {
+    igx_chip_remove?: string;
+    igx_chip_select?: string;
+}
+
+export const ChipResourceStringsEN: IChipResourceStrings = {
+    igx_chip_remove: 'remove chip',
+    igx_chip_select: 'select chip'
+};

projects/igniteui-angular/src/lib/core/i18n/resources.ts

@@ -4,12 +4,14 @@ import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './time-
 import { IPaginatorResourceStrings, PaginatorResourceStringsEN } from './paginator-resources';
 import { cloneValue } from '../utils';
 import { ICarouselResourceStrings, CarouselResourceStringsEN } from './carousel-resources';
+import { IChipResourceStrings, ChipResourceStringsEN } from './chip-resources';
 import { IListResourceStrings, ListResourceStringsEN } from './list-resources';
 import { CalendarResourceStringsEN, ICalendarResourceStrings } from './calendar-resources';
 import { IInputResourceStrings, InputResourceStringsEN } from './input-resources';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICalendarResourceStrings,
-    ICarouselResourceStrings, IInputResourceStrings, IDateRangePickerResourceStrings, IListResourceStrings, IPaginatorResourceStrings { }
+    ICarouselResourceStrings, IChipResourceStrings, IInputResourceStrings, IDateRangePickerResourceStrings, IListResourceStrings,
+    IPaginatorResourceStrings { }
 
 /**
  * @hidden
@@ -19,6 +21,7 @@ export const CurrentResourceStrings = {
     PaginatorResStrings: cloneValue(PaginatorResourceStringsEN),
     TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
     CalendarResStrings: cloneValue(CalendarResourceStringsEN),
+    ChipResStrings: cloneValue(ChipResourceStringsEN),
     DateRangePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
     ListResStrings: cloneValue(ListResourceStringsEN),
@@ -50,6 +53,7 @@ export const changei18n = (resourceStrings: IResourceStrings) => {
 export const getCurrentResourceStrings = (): IResourceStrings => ({
     ...CurrentResourceStrings.CalendarResStrings,
     ...CurrentResourceStrings.CarouselResStrings,
+    ...CurrentResourceStrings.ChipResStrings,
     ...CurrentResourceStrings.DateRangePickerResStrings,
     ...CurrentResourceStrings.GridResStrings,
     ...CurrentResourceStrings.InputResStrings,