Merge branch 'master' into puppeteer

Author: kdinev

CHANGELOG.md

@@ -5,6 +5,8 @@ All notable changes for each version of this project will be documented in this
 ## 15.1.0
 
 ### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`:
+    - `GroupMemberCountSortingStrategy` is added, which can be used to sort the grid by number of items in each group in ASC or DESC order, if grouping is applied.
 - `IgxColumnComponent`
     - Added `currRec` and `groupRec` parameters to the `groupingComparer` function that give access to the all properties of the compared records.
 
@@ -23,11 +25,14 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** The `onSlideChanged`, `onSlideAdded`, `onSlideRemoved`, `onCarouselPaused` and `onCarouselPlaying` outputs have been renamed to `slideChanged`, `slideAdded`, `slideRemoved`, `carouselPaused` and `carouselPlaying` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
 - `IgxRadio`, `IgxRadioGroup`
     - Added component validation along with styles for invalid state
+- `igxMask` directive
+    - Added the capability to escape mask pattern literals.
 - `IgxBadge`
     - Added `shape` property that controls the shape of the badge and can be either `square` or `rounded`. The default shape of the badge is rounded. 
 - `IgxAvatar`
     - **Breaking Change** The `roundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `shape` attribute that can be `square`, `rounded` or `circle`. The default shape of the avatar is `square`. 
 
+
 ## 15.0.1
 
 - `IgxGrid`

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

@@ -8,6 +8,8 @@
     [indeterminate]="indeterminate"
     [checked]="checked"
     [required]="required"
+    [attr.aria-required]="required"
+    [attr.aria-invalid]="invalid"
     [attr.aria-checked]="ariaChecked"
     [attr.aria-labelledby]="ariaLabel ? null : ariaLabelledBy"
     [attr.aria-label]="ariaLabel"

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 { UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormBuilder, FormsModule, ReactiveFormsModule, Validators, NgForm } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxCheckboxComponent } from './checkbox.component';
@@ -21,6 +21,7 @@ describe('IgxCheckbox', () => {
                 CheckboxExternalLabelComponent,
                 CheckboxInvisibleLabelComponent,
                 CheckboxDisabledTransitionsComponent,
+                CheckboxFormComponent,
                 CheckboxFormGroupComponent,
                 IgxCheckboxComponent
             ],
@@ -275,6 +276,7 @@ describe('IgxCheckbox', () => {
         expect(nativeCheckbox.required).toBeTruthy();
 
         checkboxInstance.required = false;
+        nativeCheckbox.required = false;
         fixture.detectChanges();
 
         expect(checkboxInstance.required).toBe(false);
@@ -316,6 +318,79 @@ describe('IgxCheckbox', () => {
         expect(testInstance.clickCounter).toEqual(2);
     });
 
+    it('Should update style when required checkbox\'s value is set.', () => {
+        const fixture = TestBed.createComponent(CheckboxRequiredComponent);
+        fixture.detectChanges();
+
+        const checkboxInstance = fixture.componentInstance.cb;
+        const domCheckbox = fixture.debugElement.query(By.css('igx-checkbox')).nativeElement;
+
+        expect(domCheckbox.classList.contains('igx-checkbox--invalid')).toBe(false);
+        expect(checkboxInstance.invalid).toBe(false);
+        expect(checkboxInstance.checked).toBe(false);
+        expect(checkboxInstance.required).toBe(true);
+
+        dispatchCbEvent('keyup', domCheckbox, fixture);
+        expect(domCheckbox.classList.contains('igx-checkbox--focused')).toBe(true);
+        dispatchCbEvent('blur', domCheckbox, fixture);
+
+        expect(checkboxInstance.invalid).toBe(true);
+        expect(domCheckbox.classList.contains('igx-checkbox--invalid')).toBe(true);
+
+        dispatchCbEvent('keyup', domCheckbox, fixture);
+        expect(domCheckbox.classList.contains('igx-checkbox--focused')).toBe(true);
+        dispatchCbEvent('click', domCheckbox, fixture);
+
+        expect(domCheckbox.classList.contains('igx-checkbox--checked')).toBe(true);
+        expect(checkboxInstance.checked).toBe(true);
+        expect(checkboxInstance.invalid).toBe(false);
+        expect(domCheckbox.classList.contains('igx-checkbox--invalid')).toBe(false);
+
+        dispatchCbEvent('click', domCheckbox, fixture);
+        dispatchCbEvent('keyup', domCheckbox, fixture);
+        expect(domCheckbox.classList.contains('igx-checkbox--focused')).toBe(true);
+        dispatchCbEvent('blur', domCheckbox, fixture);
+
+        expect(checkboxInstance.checked).toBe(false);
+        expect(checkboxInstance.invalid).toBe(true);
+        expect(domCheckbox.classList.contains('igx-checkbox--invalid')).toBe(true);
+    });
+
+    it('Should work properly with ngModel', fakeAsync(() => {
+        const fixture = TestBed.createComponent(CheckboxFormComponent);
+        fixture.detectChanges();
+        tick();
+
+        const checkbox = fixture.componentInstance.checkbox;
+        expect(checkbox.invalid).toEqual(false);
+
+        checkbox.onBlur();
+        expect(checkbox.invalid).toEqual(true);
+
+        fixture.componentInstance.ngForm.resetForm();
+        tick();
+        expect(checkbox.invalid).toEqual(false);
+    }));
+
+    it('Should work properly with reactive forms validation.', () => {
+        const fixture = TestBed.createComponent(CheckboxFormGroupComponent);
+        fixture.detectChanges();
+
+        const checkbox = fixture.componentInstance.cb;
+        checkbox.checked = false;
+        expect(checkbox.required).toBe(true);
+        expect(checkbox.nativeElement.getAttribute('aria-required')).toEqual('true');
+        expect(checkbox.nativeElement.getAttribute('aria-invalid')).toEqual('false');
+
+        fixture.debugElement.componentInstance.markAsTouched();
+        fixture.detectChanges();
+
+        const invalidCheckbox = fixture.debugElement.nativeElement.querySelectorAll(`.igx-checkbox--invalid`);
+        expect(invalidCheckbox.length).toBe(1);
+        expect(checkbox.invalid).toBe(true);
+        expect(checkbox.nativeElement.getAttribute('aria-invalid')).toEqual('true');
+    });
+
     describe('EditorProvider', () => {
         it('Should return correct edit element', () => {
             const fixture = TestBed.createComponent(CheckboxSimpleComponent);
@@ -410,7 +485,37 @@ class CheckboxDisabledTransitionsComponent {
 class CheckboxFormGroupComponent {
     @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
 
-    public myForm = this.fb.group({ checkbox: [null] });
+    public myForm = this.fb.group({ checkbox: ['', Validators.required] });
 
     constructor(private fb: UntypedFormBuilder) {}
+
+    public markAsTouched() {
+        if (!this.myForm.valid) {
+            for (const key in this.myForm.controls) {
+                if (this.myForm.controls[key]) {
+                    this.myForm.controls[key].markAsTouched();
+                    this.myForm.controls[key].updateValueAndValidity();
+                }
+            }
+        }
+    }
 }
+@Component({
+    template: `
+    <form #form="ngForm">
+        <igx-checkbox #checkbox [(ngModel)]="subscribed" name="checkbox" required>Checkbox</igx-checkbox>
+    </form>
+`
+})
+class CheckboxFormComponent {
+    @ViewChild('checkbox', { read: IgxCheckboxComponent, static: true })
+    public checkbox: IgxCheckboxComponent;
+    @ViewChild(NgForm, { static: true })
+    public ngForm: NgForm;
+    public subscribed: string;
+}
+
+const dispatchCbEvent = (eventName, cbNativeElement, fixture) => {
+    cbNativeElement.dispatchEvent(new Event(eventName));
+    fixture.detectChanges();
+};