Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into ddincheva/rowStyling

Author: ddincheva

CHANGELOG.md

@@ -2,13 +2,23 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 12.1.3
+
+### New Features
+- `igxGrid`
+    - Added `headerStyles` and `headerGroupStyles` inputs to the column component.
+    Similar to `cellStyles` is exposes a way to bind CSS properties and style the grid headers.
+
 ## 12.1.2
 - `igxGrid`
     - The column formatter callback signature now accepts the row data as an additional argument:
     ```typescript formatter(value: any, rowData?: any)```
     The `rowData` argument may be `undefined` in remote scenarios/applying the callback on filtering labels
     so make sure to check its availability.
 
+- `IgxExcelExporterService`
+    - Added support for freezing column headers in **Excel**. By default, the column headers would not be frozen but this behavior can be controlled by the `freezeHeaders` option of the IgxExcelExporterOptions object.
+
 ## 12.1.0
 
 ### New Features

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts

@@ -149,7 +149,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
             console.warn('The grid must use row edit mode to perform row adding! Please set rowEditable to true.');
             return;
         }
-        grid.beginAddRowByIndex(context.rowID, context.index, asChild, event);
+        grid.gridAPI.crudService.enterAddRowMode(context, asChild, event);
         this.strip.hide();
     }
 

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

@@ -454,6 +454,11 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
         this._onTouchedCallback = fn;
     }
 
+    /** @hidden @internal */
+    public setDisabledState(isDisabled: boolean) {
+        this.disabled = isDisabled;
+    }
+
     /** @hidden @internal */
     public getEditElement() {
         return this.nativeCheckbox.nativeElement;

projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts

@@ -1,12 +1,13 @@
 import { Component, ViewChild, ViewChildren, QueryList, DebugElement } from '@angular/core';
 import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
-import { FormsModule, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormsModule, FormBuilder, ReactiveFormsModule, Validators, FormControl, FormGroup } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { IgxInputGroupComponent, IgxInputGroupModule } from '../../input-group/input-group.component';
 import { IgxInputDirective, IgxInputState } from './input.directive';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 
 const INPUT_CSS_CLASS = 'igx-input-group__input';
+const CSS_CLASS_INPUT_GROUP_LABEL = 'igx-input-group__label';
 const TEXTAREA_CSS_CLASS = 'igx-input-group__textarea';
 
 const INPUT_GROUP_FOCUSED_CSS_CLASS = 'igx-input-group--focused';
@@ -35,7 +36,8 @@ describe('IgxInput', () => {
                 DataBoundDisabledInputWithoutValueComponent,
                 ReactiveFormComponent,
                 InputsWithSameNameAttributesComponent,
-                ToggleRequiredWithNgModelInputComponent
+                ToggleRequiredWithNgModelInputComponent,
+                InputReactiveFormComponent
             ],
             imports: [
                 IgxInputGroupModule,
@@ -521,11 +523,16 @@ describe('IgxInput', () => {
         fixture.detectChanges();
         const igxInput = fixture.componentInstance.strIgxInput;
 
+        expect(igxInput.disabled).toBe(false);
+        expect(igxInput.inputGroup.disabled).toBe(false);
+
         fixture.componentInstance.form.disable();
         expect(igxInput.disabled).toBe(true);
+        expect(igxInput.inputGroup.disabled).toBe(true);
 
         fixture.componentInstance.form.get('str').enable();
         expect(igxInput.disabled).toBe(false);
+        expect(igxInput.inputGroup.disabled).toBe(false);
     }));
 
     it('should style input when required is toggled dynamically.', () => {
@@ -663,6 +670,69 @@ describe('IgxInput', () => {
         igxInput.value = 'Test';
         expect(igxInput.value).toBe('Test');
     });
+
+    it('Should properly initialize when used as a reactive form control - without initial validators/toggle validators', fakeAsync(() => {
+        const fix = TestBed.createComponent(InputReactiveFormComponent);
+        fix.detectChanges();
+        // 1) check if label's --required class and its asterisk are applied
+        const dom = fix.debugElement;
+        const input = fix.componentInstance.input;
+        const inputGroup = fix.componentInstance.igxInputGroup.element.nativeElement;
+        const formGroup: FormGroup = fix.componentInstance.reactiveForm;
+
+        // interaction test - expect actual asterisk
+        // The only way to get a pseudo elements like :before OR :after is to use getComputedStyle(element [, pseudoElt]),
+        // as these are not in the actual DOM
+        let asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
+        expect(asterisk).toBe('"*"');
+        expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toBe(true);
+
+        // 2) check that input group's --invalid class is NOT applied
+        expect(inputGroup.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(false);
+
+        // interaction test - focus&blur, so the --invalid and --required classes are applied
+        // *Use markAsTouched() instead of user interaction ( calling focus + blur) because:
+        // Angular handles blur and marks the component as touched, however:
+        // in order to ensure Angular handles blur prior to our blur handler (where we check touched),
+        // we have to call blur twice.
+        fix.debugElement.componentInstance.markAsTouched();
+        tick();
+        fix.detectChanges();
+
+        expect(inputGroup.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
+        expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toBe(true);
+
+        // 3) Check if the input group's --invalid and --required classes are removed when validator is dynamically cleared
+        fix.componentInstance.removeValidators(formGroup);
+        fix.detectChanges();
+        tick();
+
+        const formReference = fix.componentInstance.reactiveForm.controls.fullName;
+        // interaction test - expect no asterisk
+        asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
+        expect(formReference).toBeDefined();
+        expect(input).toBeDefined();
+        expect(input.nativeElement.value).toEqual('');
+        expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toEqual(false);
+        expect(asterisk).toBe('none');
+        expect(input.valid).toEqual(IgxInputState.INITIAL);
+
+        // interact with the input and expect no changes
+        input.nativeElement.dispatchEvent(new Event('focus'));
+        input.nativeElement.dispatchEvent(new Event('blur'));
+        tick();
+        fix.detectChanges();
+        expect(input.valid).toEqual(IgxInputState.INITIAL);
+
+        // Re-add all Validators
+        fix.componentInstance.addValidators(formGroup);
+        fix.detectChanges();
+
+        expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toBe(true);
+        // interaction test - expect actual asterisk
+        asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
+        expect(asterisk).toBe('"*"');
+    }));
 });
 
 @Component({
@@ -917,6 +987,67 @@ class ToggleRequiredWithNgModelInputComponent {
     public data1 = '';
     public isRequired = false;
 }
+@Component({
+    template: `
+        <form [formGroup]="reactiveForm" (ngSubmit)="onSubmitReactive()">
+            <igx-input-group #igxInputGroup>
+                <input igxInput #inputReactive name="fullName" type="text" formControlName="fullName" />
+                <label igxLabel for="fullName">Full Name</label>
+                <igx-suffix>
+                    <igx-icon>person</igx-icon>
+                </igx-suffix>
+            </igx-input-group>
+        </form>
+`
+})
+
+class InputReactiveFormComponent {
+    @ViewChild('igxInputGroup', { static: true }) public igxInputGroup: IgxInputGroupComponent;
+    @ViewChild('inputReactive', { read: IgxInputDirective }) public input: IgxInputDirective;
+    public reactiveForm: FormGroup;
+
+    public validationType = {
+        fullName: [Validators.required]
+    };
+
+    constructor(fb: FormBuilder) {
+        this.reactiveForm = fb.group({
+            fullName: new FormControl('', Validators.required)
+        });
+    }
+    public onSubmitReactive() { }
+
+    public removeValidators(form: FormGroup) {
+        for (const key in form.controls) {
+            if (form.controls.hasOwnProperty(key)) {
+                form.get(key).clearValidators();
+                form.get(key).updateValueAndValidity();
+            }
+        }
+    }
+
+    public addValidators(form: FormGroup) {
+        for (const key in form.controls) {
+            if (form.controls.hasOwnProperty(key)) {
+                form.get(key).setValidators(this.validationType[key]);
+                form.get(key).updateValueAndValidity();
+            }
+        }
+    }
+
+    public markAsTouched() {
+        if (!this.reactiveForm.valid) {
+            for (const key in this.reactiveForm.controls) {
+                if (this.reactiveForm.controls.hasOwnProperty(key)) {
+                    if (this.reactiveForm.controls[key]) {
+                        this.reactiveForm.controls[key].markAsTouched();
+                        this.reactiveForm.controls[key].updateValueAndValidity();
+                    }
+                }
+            }
+        }
+    }
+}
 
 const testRequiredValidation = (inputElement, fixture) => {
     dispatchInputEvent('focus', inputElement, fixture);

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -174,9 +174,6 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
      * ```
      */
     public get disabled() {
-        if (this.ngControl && this.ngControl.disabled !== null) {
-            return this.ngControl.disabled;
-        }
         return this._disabled;
     }
 
@@ -268,6 +265,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
         this.inputGroup.hasPlaceholder = this.nativeElement.hasAttribute(
             'placeholder'
         );
+
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            this.disabled = this.ngControl.disabled;
+        }
         this.inputGroup.disabled =
             this.inputGroup.disabled ||
             this.nativeElement.hasAttribute('disabled');
@@ -349,16 +350,23 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     protected updateValidityState() {
         if (this.ngControl) {
             if (this.ngControl.control.validator || this.ngControl.control.asyncValidator) {
+                // Run the validation with empty object to check if required is enabled.
+                const error = this.ngControl.control.validator({} as AbstractControl);
+                this.inputGroup.isRequired = error && error.required;
                 if (!this.disabled && (this.ngControl.control.touched || this.ngControl.control.dirty)) {
                     // the control is not disabled and is touched or dirty
                     this._valid = this.ngControl.invalid ?
-                                  IgxInputState.INVALID : this.focused ? IgxInputState.VALID :
-                                  IgxInputState.INITIAL;
+                        IgxInputState.INVALID : this.focused ? IgxInputState.VALID :
+                            IgxInputState.INITIAL;
                 } else {
                     //  if control is untouched, pristine, or disabled its state is initial. This is when user did not interact
                     //  with the input or when form/control is reset
                     this._valid = IgxInputState.INITIAL;
                 }
+            } else {
+                // If validator is dynamically cleared, reset label's required class(asterisk) and IgxInputState #10010
+                this._valid = IgxInputState.INITIAL;
+                this.inputGroup.isRequired = false;
             }
         } else {
             this.checkNativeValidity();
@@ -459,8 +467,8 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     private checkNativeValidity() {
         if (!this.disabled && this._hasValidators()) {
             this._valid = this.nativeElement.checkValidity() ?
-                            this.focused ? IgxInputState.VALID : IgxInputState.INITIAL :
-                            IgxInputState.INVALID;
+                this.focused ? IgxInputState.VALID : IgxInputState.INITIAL :
+                IgxInputState.INVALID;
         }
     }
 

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts

@@ -435,7 +435,7 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
     private _selectRadioButton() {
         if (this.radioButtons) {
             this.radioButtons.forEach((button) => {
-                if (!this._value) {
+                if (this._value === null) {
                     // no value - uncheck all radio buttons
                     if (button.checked) {
                         button.checked = false;

projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts

@@ -286,6 +286,19 @@ describe('IgxHighlight', () => {
         expect(spans.length).toBe(4);
         expect(activeSpans.length).toBe(1);
     });
+
+    it('Should not throw error when active highlight is not set', () => {
+        const fix = TestBed.createComponent(HighlightLoremIpsumComponent);
+        fix.detectChanges();
+
+        const component: HighlightLoremIpsumComponent = fix.debugElement.componentInstance;
+        component.highlight.row = undefined;
+        component.highlight.column = undefined;
+        component.highlightText('a');
+
+        expect(() => component.highlight.activateIfNecessary()).not.toThrowError();
+    });
+
 });
 
 @Component({

projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts

@@ -340,7 +340,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     public activateIfNecessary(): void {
         const group = IgxTextHighlightDirective.highlightGroupsMap.get(this.groupName);
 
-        if (group.column === this.column && group.row === this.row && compareMaps(this.metadata, group.metadata)) {
+        if (group.index >= 0 && group.column === this.column && group.row === this.row && compareMaps(this.metadata, group.metadata)) {
             this.activate(group.index);
         }
     }

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -8,7 +8,7 @@ import { IgxGridBaseDirective } from './grid-base.directive';
 import { IgxRowDirective } from './row.directive';
 import { IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 import { Transaction, TransactionType, State } from '../services/transaction/transaction';
-import { IgxCell, IgxGridCRUDService, IgxRow } from './common/crud.service';
+import { IgxCell, IgxGridCRUDService, IgxEditRow } from './common/crud.service';
 import { GridType } from './common/grid.interface';
 import { ColumnType } from './common/column.interface';
 import { IGridEditEventArgs, IRowToggleEventArgs } from './common/events';
@@ -122,23 +122,6 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
         }
     }
 
-    public update_add_cell(cell: IgxCell): IGridEditEventArgs  {
-        if (!cell) {
-            return;
-        }
-
-        const args = cell.createEditEventArgs(true);
-
-        const data = cell.rowData;
-        if (cell.column.hasNestedPath) {
-            mergeObjects(data, reverseMapper(cell.column.field, args.newValue));
-        } else {
-            data[cell.column.field] = args.newValue;
-        }
-        mergeObjects(this.crudService.row.data, data);
-        return args;
-    }
-
     public update_cell(cell: IgxCell): IGridEditEventArgs {
         if (!cell) {
             return;
@@ -167,7 +150,7 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
     }
 
     // TODO: CRUD refactor to not emit editing evts.
-    public update_row(row: IgxRow, value: any, event?: Event) {
+    public update_row(row: IgxEditRow, value: any, event?: Event) {
         const grid = this.grid;
         const selected = grid.selectionService.isRowSelected(row.id);
         const rowInEditMode = this.crudService.row;
@@ -270,10 +253,11 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
         return this.grid.filteredData;
     }
 
-    public addRowToData(rowData: any, _parentRowID?) {
+    public addRowToData(rowData: any, parentID?) {
         // Add row goes to transactions and if rowEditable is properly implemented, added rows will go to pending transactions
         // If there is a row in edit - > commit and close
         const grid = this.grid;
+
         if (grid.transactions.enabled) {
             const transactionId = grid.primaryKey ? rowData[grid.primaryKey] : rowData;
             const transaction: Transaction = { id: transactionId, type: TransactionType.ADD, newValue: rowData };