Merge pull request #12071 from IgniteUI/14.1.x

Mass merge from 14.1.x to master

Author: ChronosSF

projects/igniteui-angular/package.json

@@ -17,13 +17,13 @@
         "angular",
         "UI components",
         "accordion",
-        "auto complete",
         "autocomplete",
         "avatar",
         "badge",
         "banner",
         "bottom nav",
         "button",
+        "button group",
         "calendar",
         "card",
         "carousel",
@@ -34,14 +34,11 @@
         "combo",
         "csv export",
         "data table",
-        "date picker",
         "datepicker",
         "datetime editor",
         "dialog",
         "drag drop",
-        "drag",
         "drop down",
-        "drop",
         "excel export",
         "expansion panel",
         "grid",
@@ -56,12 +53,13 @@
         "navdrawer",
         "progress bar",
         "radio",
+        "rating",
         "select",
         "slider",
         "snackbar",
+        "stepper",
         "switch",
         "tabs",
-        "time picker",
         "timepicker",
         "toast",
         "toggle",

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

@@ -980,6 +980,13 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         });
     }
 
+        /** @hidden @internal */
+        public ngDoCheck() {
+            if (this.data?.length && this.selection.length) {
+                this._value = this.createDisplayText(this.selection, []);
+            }
+        }
+
     /** @hidden @internal */
     public ngOnDestroy() {
         this.destroy$.next();

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

@@ -1898,7 +1898,8 @@ describe('igxCombo', () => {
             TestBed.configureTestingModule({
                 declarations: [
                     IgxComboSampleComponent,
-                    IgxComboRemoteDataComponent
+                    IgxComboRemoteDataComponent,
+                    IgxComboBindingDataAfterInitComponent
                 ],
                 imports: [
                     IgxComboModule,
@@ -2187,6 +2188,16 @@ describe('igxCombo', () => {
             expect(combo.selection.length).toEqual(0);
             expect((combo as any)._remoteSelection[0]).toBeUndefined();
         });
+        it('should add predefined selection to the input when data is bound after initialization', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxComboBindingDataAfterInitComponent);
+            fixture.detectChanges();
+            input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+            tick(1200);
+            fixture.detectChanges();
+
+            const expectedOutput = 'One';
+            expect(input.nativeElement.value).toEqual(expectedOutput);
+        }));
     });
     describe('Grouping tests: ', () => {
         configureTestSuite();
@@ -3311,6 +3322,29 @@ class="input-container" [filterable]="true" placeholder="Location(s)"
 `
 })
 
+@Component({
+    template: `
+<form [formGroup]="reactiveForm" (ngSubmit)="onSubmitReactive()">
+<p>
+<label>First Name:</label>
+<input type="text" formControlName="firstName">
+</p>
+<p>
+<label>Password:</label>
+<input type="password" formControlName="password">
+</p>
+<p>
+<igx-combo #comboReactive formControlName="townCombo"
+class="input-container" [filterable]="true" placeholder="Location(s)"
+[data]="items" [displayKey]="'field'" [groupKey]="'region'"><label igxLabel>Town</label></igx-combo>
+</p>
+<p>
+<button type="submit" [disabled]="!reactiveForm.valid">Submit</button>
+</p>
+</form>
+`
+})
+
 class IgxComboFormComponent {
     @ViewChild('comboReactive', { read: IgxComboComponent, static: true })
     public combo: IgxComboComponent;
@@ -3583,3 +3617,22 @@ export class ComboModelBindingComponent implements OnInit {
         { text: 'Four', id: 3 }, { text: 'Five', id: 4 }];
     }
 }
+
+@Component({
+    template: `
+        <igx-combo [(ngModel)]="selectedItems" [data]="items" [valueKey]="'id'" [displayKey]="'text'"></igx-combo>`
+})
+export class IgxComboBindingDataAfterInitComponent implements AfterViewInit {
+    public items: any[] = [];
+    public selectedItems: any[] = [0];
+
+    constructor(private cdr: ChangeDetectorRef) { }
+
+    public ngAfterViewInit() {
+        setTimeout(() => {
+            this.items = [{ text: 'One', id: 0 }, { text: 'Two', id: 1 }, { text: 'Three', id: 2 },
+            { text: 'Four', id: 3 }, { text: 'Five', id: 4 }];
+            this.cdr.detectChanges();
+        }, 1000);
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -124,7 +124,6 @@
         width: 100%;
         height: 100%;
         border-radius: inherit;
-        background-color: var-get($theme, 'background');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1404,6 +1404,7 @@
         padding-inline-end: rem(4px) !important;
 
         > igx-icon {
+            margin-inline-start: auto;
             color: color($palette, 'error', 500);
             width: var(--igx-icon-size, rem(18px));
             height: var(--igx-icon-size, rem(18px));

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -140,8 +140,8 @@
     }
 
     %igx-navbar-icon-display {
-        igx-icon,
-        button[igxButton='icon'] {
+        >igx-icon,
+        [igxButton='icon'] {
             cursor: pointer;
             color: var-get($theme, 'idle-icon-color');
             transition: color .15s $ease-out-quad;

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

@@ -21,7 +21,7 @@
 ///
 /// @prop {Map} inactive-text-color [color: ('grays', 400)] - The text color for previous and next month dates.
 /// @prop {Map} label-color [color: ('grays', 400)] - The text color for weekday labels.
-/// @prop {Map} weekend-text-color [color: ('grays', 500)] - The text color for weekend days.
+/// @prop {Map} weekend-text-color [contrast-color: 'surface'] - The text color for weekend days.
 ///
 /// @prop {Map} year-current-text-color [color: ('secondary', 500)] - The text color for the current/selected year.
 /// @prop {Map} year-hover-text-color [color: ('secondary', 500)] - The year hover text color.
@@ -124,7 +124,7 @@ $light-calendar: extend(
         ),
 
         weekend-text-color: (
-            color: ('grays', 500),
+            contrast-color: 'surface',
         ),
 
         year-current-text-color: (
@@ -504,7 +504,6 @@ $bootstrap-calendar: extend(
             color: ('primary', 500)
         ),
 
-
         date-selected-background: (
             color: ('primary', 300),
         ),
@@ -564,7 +563,7 @@ $bootstrap-calendar: extend(
 /// @prop {Map} date-disabled-text-color [color: ('grays', 300)] - The text color for disabled dates.
 /// @prop {Map} inactive-text-color [color: ('grays', 600)] - The text color for previous and next month dates.
 /// @prop {Map} label-color [color: ('grays', 600)] - The text color for weekday labels.
-/// @prop {Map} weekend-text-color [color: ('grays', 600)] - The text color for weekend days.
+/// @prop {Map} weekend-text-color [color: ('grays', 900)] - The text color for weekend days.
 /// @prop {Color} month-hover-background [transparent] - The month hover text color.
 /// @prop {Map} month-hover-text-color [color: ('primary', 500)] - The month hover text color.
 /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 500)] - The hover text color for the selected/current date.
@@ -634,7 +633,7 @@ $indigo-calendar: extend(
         ),
 
         weekend-text-color: (
-            color: ('grays', 600)
+            color: ('grays', 900)
         ),
 
         month-hover-background: transparent,

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -74,7 +74,8 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
                 (compositionstart)="grid.crudService.isInCompositionMode = true"
@@ -86,7 +87,8 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -131,7 +133,8 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
                 [igxDateTimeEditor]="column.defaultDateTimeFormat" 
@@ -144,7 +147,8 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -157,7 +161,8 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -172,7 +177,7 @@
 <ng-container *ngTemplateOutlet="template; context: context"></ng-container>
 
 <ng-container *ngIf="isInvalid">
-    <igx-icon #errorIcon [igxTooltipTarget]="tooltipRef" 
+    <igx-icon #errorIcon [igxTooltipTarget]="tooltipRef"  [igxToggleOutlet]="grid.outlet"
     (mouseover)='errorShowing = true' (mouseout)='errorShowing = false'>error</igx-icon>
     <div [id]="ariaErrorMessage"
     igxTooltip #error #tooltipRef="tooltip">

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -469,14 +469,18 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     public get readonly(): boolean {
         return !this.editable;
     }
+
     /** @hidden @internal */
     @HostBinding('attr.aria-describedby')
-    public get describeBy() {
-        return this.grid.id + '_' + this.column.field;
+    public get ariaDescribeBy() {
+        let describeBy = (this.gridID + '_' + this.column.field).replace('.', '_');
+        if (this.isInvalid) {
+            describeBy += ' ' + this.ariaErrorMessage;
+        }
+        return describeBy;
     }
 
     /** @hidden @internal */
-    @HostBinding('attr.aria-errormessage')
     public get ariaErrorMessage() {
         return this.grid.id + '_' + this.column.field + '_' + this.intRow.index + '_error';
     }

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -136,7 +136,8 @@ export class IgxGridRowStylesPipe implements PipeTransform {
         }
         for (const prop of Object.keys(styles)) {
             const cb = styles[prop];
-            const row = new IgxGridRow((this.grid as any), index, rowData);
+            const data = this.grid.isTreeRow && this.grid.isTreeRow(rowData) ? rowData.data : rowData;
+            const row = new IgxGridRow((this.grid as any), index, data);
             css[prop] = typeof cb === 'function' ? cb(row) : cb;
         }
         return css;