Merge branch 'master' into astaev/formatFilterStrategy

Author: astaev

CHANGELOG.md

@@ -25,6 +25,7 @@ All notable changes for each version of this project will be documented in this
     ng update igniteui-angular --migrate-only
     ```
     This will ensure your application is updated to use the new output names.
+- `IgxCheckbox, IgxRadio, IgxSwitch` now follow the Google Material spec for focus behavior. See [checkbox](https://material.io/components/checkboxes), [radio](https://material.io/components/radio-buttons), and [switch](https://material.io/components/switches).
 - `IgxDialog`
     - The dialog content has been moved inside the dialog window container in the template. This means that if you have added something in-between the opening and closing tags of the dialog, you may have to adjust its styling a bit since that content is now rendered inside a container that has padding on it.
 - `IgxCalendar`

package-lock.json

@@ -46,22 +46,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^11.1.0",
-    "@angular/common": "^11.1.0",
-    "@angular/compiler": "^11.1.0",
-    "@angular/core": "^11.1.0",
-    "@angular/forms": "^11.1.0",
-    "@angular/platform-browser": "^11.1.0",
-    "@angular/platform-browser-dynamic": "^11.1.0",
-    "@angular/router": "^11.1.0",
+    "@angular/animations": "^11.2.0",
+    "@angular/common": "^11.2.0",
+    "@angular/compiler": "^11.2.0",
+    "@angular/core": "^11.2.0",
+    "@angular/forms": "^11.2.0",
+    "@angular/platform-browser": "^11.2.0",
+    "@angular/platform-browser-dynamic": "^11.2.0",
+    "@angular/router": "^11.2.0",
     "@igniteui/material-icons-extended": "^2.4.0",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.6.11",
     "hammerjs": "^2.0.8",
     "igniteui-trial-watermark": "^1.0.3",
-    "jszip": "^3.5.0",
+    "jszip": "^3.6.0",
     "lodash.mergewith": "^4.6.2",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.6.3",
@@ -72,27 +72,27 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1101.1",
-    "@angular-devkit/schematics": "^11.1.1",
+    "@angular-devkit/build-angular": "~0.1102.0",
+    "@angular-devkit/schematics": "^11.2.0",
     "@angular-eslint/builder": "1.1.0",
     "@angular-eslint/eslint-plugin": "1.1.0",
     "@angular-eslint/eslint-plugin-template": "1.1.0",
-    "@angular-eslint/schematics": "^1.1.0",
+    "@angular-eslint/schematics": "^1.2.0",
     "@angular-eslint/template-parser": "1.1.0",
-    "@angular/cli": "~11.1.1",
-    "@angular/compiler-cli": "^11.1.0",
-    "@angular/language-service": "^11.1.0",
+    "@angular/cli": "~11.2.0",
+    "@angular/compiler-cli": "^11.2.0",
+    "@angular/language-service": "^11.2.0",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "^3.3.16",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.12.39",
+    "@types/node": "^12.20.0",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "4.3.0",
     "@typescript-eslint/parser": "4.3.0",
     "browser-sync": "^2.26.12",
     "codelyzer": "^6.0.0",
     "coveralls": "^3.1.0",
-    "eslint": "^7.6.0",
+    "eslint": "^7.20.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
@@ -121,20 +121,20 @@
     "karma-junit-reporter": "~2.0.1",
     "karma-spec-reporter": "~0.0.32",
     "lunr": "^2.3.8",
-    "ng-packagr": "^11.0.3",
+    "ng-packagr": "^11.2.1",
     "pngcrush": "^2.0.1",
     "protractor": "~7.0.0",
     "sass-true": "^5.0.0",
     "sassdoc": "^2.7.3",
     "sassdoc-plugin-localization": "^1.4.1",
-    "stylelint": "^11.1.1",
-    "stylelint-scss": "^3.17.2",
+    "stylelint": "^13.10.0",
+    "stylelint-scss": "^3.19.0",
     "themeleon": "^3.0.2",
     "ts-node": "~7.0.1",
     "tslint": "~6.1.0",
     "typedoc": "^0.17.7",
     "typedoc-plugin-localization": "^2.2.1",
-    "typescript": "~4.0.2",
+    "typescript": "^4.0.7",
     "webpack-sources": "1.3.0"
   }
 }

package.json

@@ -13,7 +13,6 @@
     [attr.aria-label]="ariaLabel"
     (change)="_onCheckboxChange($event)"
     (click)="_onCheckboxClick($event)"
-    (focus)="onFocus()"
     (blur)="onBlur()" />
 
 <div

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

@@ -219,12 +219,15 @@ describe('IgxCheckbox', () => {
         const fixture = TestBed.createComponent(CheckboxSimpleComponent);
         const testInstance = fixture.componentInstance;
         const checkboxInstance = testInstance.cb;
+        const cbxEl = fixture.debugElement.query(By.directive(IgxCheckboxComponent)).nativeElement;
         const nativeCheckbox = checkboxInstance.nativeCheckbox.nativeElement;
         const nativeLabel = checkboxInstance.nativeLabel.nativeElement;
         const placeholderLabel = checkboxInstance.placeholderLabel.nativeElement;
+
         fixture.detectChanges();
+        expect(checkboxInstance.focused).toBe(false);
 
-        nativeCheckbox.dispatchEvent(new Event('focus'));
+        cbxEl.dispatchEvent(new KeyboardEvent('keyup'));
         fixture.detectChanges();
         expect(checkboxInstance.focused).toBe(true);
 

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

@@ -2,6 +2,7 @@ import {
     Component,
     Directive,
     EventEmitter,
+    HostListener,
     forwardRef,
     HostBinding,
     Input,
@@ -335,6 +336,15 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
      * @hidden
      */
     private _onChangeCallback: (_: any) => void = noop;
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostListener('keyup', ['$event'])
+    public onKeyUp(event: KeyboardEvent) {
+        event.stopPropagation();
+        this.focused = true;
+    }
     /**
      * If `disabled` is `false`, switches the `checked` state.
      *
@@ -348,10 +358,10 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
             return;
         }
 
+        this.nativeCheckbox.nativeElement.focus();
+
         this.indeterminate = false;
-        this.focused = false;
         this.checked = !this.checked;
-
         this.change.emit({ checked: this.checked, checkbox: this });
         this._onChangeCallback(this.checked);
     }
@@ -378,11 +388,11 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
             event.preventDefault();
         }
 
+        this.toggle();
+
         if (isIE()) {
             this.nativeCheckbox.nativeElement.blur();
         }
-
-        this.toggle();
     }
 
     /** @hidden @internal */
@@ -394,11 +404,6 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
         this.toggle();
     }
 
-    /** @hidden @internal */
-    public onFocus() {
-        this.focused = true;
-    }
-
     /** @hidden @internal */
     public onBlur() {
         this.focused = false;

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

@@ -376,7 +376,6 @@
     }
 
     %cbx-ripple--focused {
-        @include animation('scale-in-out' 1s $ease-out-quad infinite);
         background: --var($theme, 'empty-color');
         transition: background .2s $ease-out-quad;
         opacity: .12;

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -343,7 +343,6 @@
     }
 
     %radio-ripple--focused {
-        @include animation('scale-in-out' 1s $ease-out-quad infinite);
         background: --var($theme, 'empty-color');
         transition: background .2s $ease-out-quad;
         opacity: .12;

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss

@@ -392,7 +392,6 @@
     }
 
     %switch-ripple--focused {
-        @include animation('scale-in-out' 1s $ease-out-quad infinite);
         background: --var($theme, 'track-off-color');
         transition: background .2s $ease-out-quad;
         opacity: .12;

projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss

@@ -511,7 +511,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
         expandedStates.set(rowID, expanded);
         grid.expansionStates = expandedStates;
         if (grid.rowEditable) {
-            grid.endEdit(true);
+            grid.endEdit(false);
         }
     }