Merge branch '11.0.x' into fix-finjs-dev-demo-11x

Author: zdrawku

package.json

@@ -6,7 +6,7 @@
     "start": "ng serve --open --configuration hmr",
     "start:es5": "ng serve --open --configuration es5",
     "build": "ng build",
-    "test": "ng test",
+    "test": "ng test igniteui-angular",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "test:lib": "ng test igniteui-angular --watch=false --no-progress --code-coverage",

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html

@@ -12,11 +12,10 @@
             class="igx-calendar-picker__prev"
             (click)="previousYear()"
             (keydown)="changeYearKB($event, false)"
-            [ngStyle]="{'min-width.%': 25, 'left': 0}">
+            [ngStyle]="{'min-width.%': 25, 'left': 0}" 
             role="button"
-            [attr.aria-label]"'Previous Year ' + previousYear()"
-            data-action="prev"
-
+            [attr.aria-label]="'Previous Year ' + getPreviousYear()"
+            data-action="prev">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
         <div [style.width.%]="100">
@@ -35,10 +34,10 @@
             class="igx-calendar-picker__next"
             (click)="nextYear()"
             (keydown)="changeYearKB($event)"
-            [ngStyle]="{'min-width.%': 25,'right': 0}">
+            [ngStyle]="{'min-width.%': 25,'right': 0}"
             role="button"
-            [attr.aria-label]"'Next Year ' + nextYear()"
-            data-action="next"
+            [attr.aria-label]="'Next Year ' + getNextYear()"
+            data-action="next">
 
             <igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
         </div>

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts

@@ -61,6 +61,28 @@ describe('IgxMonthPicker', () => {
         expect(currentYear.nativeElement.textContent.trim()).toMatch('2019');
     });
 
+    it('should properly render month picker rowheader elements', () => {
+        const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+        fixture.detectChanges();
+
+        const dom = fixture.debugElement;
+        const monthPicker = fixture.componentInstance.monthPicker;
+
+        const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+        const next = dom.query(By.css('.igx-calendar-picker__next'));
+
+        expect(prev.nativeElement.getAttribute('aria-label')).toEqual('Previous Year ' + monthPicker.getPreviousYear());
+        expect(prev.nativeElement.getAttribute('role')).toEqual('button');
+        expect(prev.nativeElement.getAttribute('data-action')).toEqual('prev');
+
+        expect(next.nativeElement.getAttribute('aria-label')).toEqual('Next Year ' + monthPicker.getNextYear());
+        expect(next.nativeElement.getAttribute('role')).toEqual('button');
+        expect(next.nativeElement.getAttribute('data-action')).toEqual('next');
+
+        expect(yearBtn.nativeElement.getAttribute('aria-live')).toEqual('polite');
+    });
+
     it('should properly set @Input properties and setters', () => {
         const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
         fixture.detectChanges();

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -201,6 +201,20 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
         }
     }
 
+    /**
+     * @hidden
+     */
+    public getNextYear() {
+        return this.calendarModel.getNextYear(this.viewDate).getFullYear();
+    }
+
+    /**
+     * @hidden
+     */
+    public getPreviousYear() {
+        return this.calendarModel.getPrevYear(this.viewDate).getFullYear();
+    }
+
     /**
      * @hidden
      */

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

@@ -1179,9 +1179,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         if ((this.ngControl.control.touched || this.ngControl.control.dirty) &&
             (this.ngControl.control.validator || this.ngControl.control.asyncValidator)) {
             if (!this.collapsed || this.inputGroup.isFocused) {
-                this.valid = this.ngControl.valid ? IgxComboState.VALID : IgxComboState.INVALID;
+                this.valid = this.ngControl.invalid ? IgxComboState.INVALID : IgxComboState.VALID;
             } else {
-                this.valid = this.ngControl.valid ? IgxComboState.INITIAL : IgxComboState.INVALID;
+                this.valid = this.ngControl.invalid ? IgxComboState.INVALID : IgxComboState.INITIAL;
             }
         }
         this.manageRequiredAsterisk();
@@ -1201,7 +1201,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     public onBlur() {
         if (this.collapsed) {
             this._onTouchedCallback();
-            if (this.ngControl && !this.ngControl.valid) {
+            if (this.ngControl && this.ngControl.invalid) {
                 this.valid = IgxComboState.INVALID;
             } else {
                 this.valid = IgxComboState.INITIAL;

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -29,7 +29,6 @@
 /// @param {Color} $item-selected-border-color [null] - The border color for a selected item from the button group.
 /// @param {Color} $item-selected-hover-background [null] - The background color for a selected item in hover or focus state in the button group.
 /// @param {Color} $selected-shadow-color [null] - The color for a focused button item in hover or focus state in the button group.
-
 ///
 /// @param {border-radius} $border-radius [null] - The border radius used for button-group component.
 ///

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -169,6 +169,10 @@
         @include e(input) {
             @extend %form-group-input--disabled !optional;
         }
+
+        @include e(textarea) {
+            @extend %form-group-textarea--disabled !optional;
+        }
     }
 
     @include mx(disabled, required) {
@@ -185,6 +189,10 @@
         @include e(input) {
             @extend %form-group-input--disabled !optional;
         }
+
+        @include e(textarea) {
+            @extend %form-group-textarea--disabled !optional;
+        }
     }
 
     @include m(cosy) {

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -1056,6 +1056,14 @@
         }
     }
 
+    %form-group-textarea--disabled {
+        color: --var($theme, 'disabled-text-color') !important;
+
+        &::placeholder {
+            color: --var($theme, 'disabled-placeholder-color');
+        }
+    }
+
     %form-group-textarea--cosy {
         min-height: rem(82px, map-get($base-scale-size, 'cosy'));
         margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'cosy'))};

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

@@ -11,6 +11,8 @@
 /// @param {Color} $track-color [null] - The color of the track.
 /// @param {Color} $track-step-color [null] - The color of the track steps.
 /// @param {Color} $thumb-color [null] - The color of the thumb.
+/// @param {Color} $thumb-focus-color [null] - The focus color of the thumb.
+///
 /// @param {Color} $label-background-color [null] - The background color of the bubble label.
 /// @param {Color} $label-text-color [null] - The text color of the bubble label.
 ///
@@ -81,6 +83,7 @@
         track-hover-color: $track-hover-color,
         thumb-color: $thumb-color,
         thumb-hover-color: $thumb-hover-color,
+        thumb-focus-color: $thumb-focus-color,
         label-background-color: $label-background-color,
         label-text-color: $label-text-color,
         disabled-thumb-color: $disabled-thumb-color,
@@ -93,7 +96,6 @@
         tick-label-color-tall: $tick-label-color-tall,
         tick-color: $tick-color,
         tick-color-tall: $tick-color-tall,
-        thumb-focus-color: $thumb-focus-color,
     ));
 }
 
@@ -118,6 +120,13 @@
         indigo-design: 2px
     ), $variant);
 
+    $slider-outline-width: map-get((
+        material: 3px,
+        fluent: 0,
+        bootstrap: 3px,
+        indigo-design: 3px
+    ), $variant);
+
     // Slide ticks
     $tick-push: rem(4px);
     $base-tick-height: rem(8px);
@@ -408,9 +417,11 @@
             transform: scale(.8);
         }
 
-        @if $variant == 'indigo-design' {
-            &:focus %igx-thumb-dot::before {
-                box-shadow: 0 0 0 rem(3px) --var($theme, 'thumb-focus-color');
+        &:focus %igx-thumb-dot::before {
+            box-shadow: 0 0 0 rem($slider-outline-width) --var($theme, 'thumb-focus-color');
+
+            @if $variant == 'fluent' {
+                border-color: --var($theme, 'thumb-focus-color') !important;
             }
         }
     }
@@ -419,9 +430,12 @@
         &:hover %igx-thumb-label {
             opacity: 0;
         }
-        @if $variant == 'indigo-design' {
-            &:focus %igx-thumb-dot::before {
-                box-shadow: none;
+
+        &:focus %igx-thumb-dot::before {
+            box-shadow: none;
+
+            @if $variant == 'fluent' {
+                border-color: --var($theme, 'thumb-disabled-border-color') !important;
             }
         }
     }

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss

@@ -56,7 +56,6 @@ $_light-checkbox: extend(
 /// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} border-radius-ripple [2px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
 /// @property {Map} focus-outline-color [igx-color: ('grays', 800)] - The focus outlined color.
-
 ///
 /// @requires {function} extend
 /// @requires {Map} $_light-checkbox