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

Author: ddincheva

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 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.
+
 ## 12.1.0
 
 ### New Features
@@ -32,7 +39,7 @@ All notable changes for each version of this project will be documented in this
     ```
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Added `batchEditing` - an `Input` property for controlling what type of transaction service is provided for the grid.
-    Setting `<igx-grid [batchEditing]="true">` is the same as providing `[{ provide: IgxGridTransaction, useClass: IgxTransactionService }]`. 
+    Setting `<igx-grid [batchEditing]="true">` is the same as providing `[{ provide: IgxGridTransaction, useClass: IgxTransactionService }]`.
     - **Deprecation** - Providing a transaction service for the grid via `providers: [IgxTransactionService]` is now deprecated and will be removed in a future patch.
     Instead, use the new `batchEditing` property to control the grid's Transactions.
 
@@ -46,14 +53,14 @@ All notable changes for each version of this project will be documented in this
         - `IgxGridCellComponent`,  `IgxTreeGridCellComponent`, `IgxHierarchicalGridCellComponent` are no longer exposed in the public API. Instead, a new class `IgxGridCell` replaces all of these. It is a facade class which exposes only the public API of the above mentioned. Automatic migration will change these imports with `CellType`, which is the interface implemented by `IgxGridCell`
     - **Behavioral changes**
     - `getCellByKey`, `getCellByColumn`, `getCellByColumnVisibleIndex`, `row.cells`, `column.cells`, `grid.selectedCells` now return an `IgxGridCell` the `CellType` interface.
-    - `cell` in `IGridCellEventArgs` is now `CellType`. `IGridCellEventArgs` are emitetd in `cellClick`, `selected`, `contextMenu` and `doubleClick` events. 
+    - `cell` in `IGridCellEventArgs` is now `CellType`. `IGridCellEventArgs` are emitetd in `cellClick`, `selected`, `contextMenu` and `doubleClick` events.
     - `let-cell` property in cell template is now `CellType`.
     - `getCellByColumnVisibleIndex` is now deprecated and will be removed in next major version. Use `getCellByKey`, `getCellByColumn` instead.
 
 - `Transactions`
     - Added `IgxFlatTransactionFactory` - the singleton service instantiates a new `TransactionService<Transaction, State>` given a `transaction type`.
     - Added `IgxHierarchicalTransactionFactory` - the singleton service instantiates a new `HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>` given a `transaction type`.
-    
+
 - `Toolbar Actions`
     - Exposed a new input property `overlaySettings` for all column actions (`hiding` | `pinning` | `advanced filtering` | `exporter`). Example below:
 

projects/igniteui-angular/migrations/common/UpdateChanges.ts

@@ -196,7 +196,8 @@ export class UpdateChanges {
         this.valueTransforms.set(functionName, callback);
     }
 
-    public getDefaultLanguageService(entryPath: string): tss.LanguageService | undefined {
+    /** Path must be absolute. If calling externally, use this.getAbsolutePath */
+    protected getDefaultLanguageService(entryPath: string): tss.LanguageService | undefined {
         const project = this.getDefaultProjectForFile(entryPath);
         return project.getLanguageService();
     }

projects/igniteui-angular/migrations/common/tsUtils.ts

@@ -247,7 +247,7 @@ const getTypeDefinitions = (langServ: tss.LanguageService, entryPath: string, po
  * Get type information about a TypeScript identifier
  *
  * @param langServ TypeScript/Angular LanguageService
- * @param entryPath path to file
+ * @param entryPath path to file (absolute)
  * @param position Index of identifier
  */
 export const getTypeDefinitionAtPosition =

projects/igniteui-angular/migrations/update-11_1_0/changes/members.json

@@ -363,6 +363,20 @@
             "definedIn": [
                 "IgxTooltipTargetDirective"
             ]
+        },
+        {
+            "member": "remote",
+            "replaceWith": "Remote",
+            "definedIn": [
+                "GridPagingMode"
+            ]
+        },
+        {
+            "member": "local",
+            "replaceWith": "Local",
+            "definedIn": [
+                "GridPagingMode"
+            ]
         }
     ]
 }

projects/igniteui-angular/migrations/update-11_1_0/index.spec.ts

@@ -749,4 +749,49 @@ export class CsvExportComponent {
             )
         ).toEqual(expectedContent);
     });
+
+    it('should update GridPagingMode enum from lowerCase to TitleCase', async () => {
+        pending('set up tests for migrations through lang service');
+        appTree.create(
+            '/testSrc/appPrefix/component/paging-test.component.ts',
+`import { Component } from '@angular/core';
+import { GridPagingMode } from "igniteui-angular";
+
+@Component({
+    selector: "app-paging-test",
+    styleUrls: ["./paging-test.component.scss"],
+    templateUrl: "./paging-test.component.html"
+})
+export class PagingComponent {
+    public pagingLocal: GridPagingMode = GridPagingMode.Local;
+    public pagingRemote: GridPagingMode = GridPagingMode.Remote;
+    constructor(){}
+}
+`);
+
+        const tree = await runner
+            .runSchematicAsync('migration-19', {}, appTree)
+            .toPromise();
+
+        const expectedContent =
+`import { Component } from '@angular/core';
+import { GridPagingMode } from "igniteui-angular";
+
+@Component({
+    selector: "app-paging-test",
+    styleUrls: ["./paging-test.component.scss"],
+    templateUrl: "./paging-test.component.html"
+})
+export class PagingComponent {
+    public pagingLocal: GridPagingMode = GridPagingMode.local;
+    public pagingRemote: GridPagingMode = GridPagingMode.remote;
+    constructor(){}
+}
+`;
+        expect(
+            tree.readContent(
+                '/testSrc/appPrefix/component/paging-test.component.ts'
+            )
+        ).toEqual(expectedContent);
+    });
 });

projects/igniteui-angular/migrations/update-11_1_0/index.ts

@@ -1,5 +1,4 @@
 import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
-import { findMatches, replaceMatch } from '../common/tsUtils';
 import { UpdateChanges } from '../common/UpdateChanges';
 
 const version = '11.1.0';
@@ -8,28 +7,5 @@ export default (): Rule => (host: Tree, context: SchematicContext) => {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
     const update = new UpdateChanges(__dirname, host, context);
-    const tsFiles = update.tsFiles;
-    const targetEnum = 'GridPagingMode';
-    const changes = [
-        { member: 'remote', replaceWith: 'Remote', definedIn: [targetEnum] },
-        { member: 'local', replaceWith: 'Local', definedIn: [targetEnum] }
-    ];
     update.applyChanges();
-    for (const entryPath of tsFiles) {
-        const ls = update.getDefaultLanguageService(entryPath);
-        let content = host.read(entryPath).toString();
-        for (const change of changes) {
-            const matches = findMatches(content, change.member);
-            for (const position of matches) {
-                const definition = ls.getDefinitionAndBoundSpan(entryPath, position - 1)?.definitions[0];
-                if (definition
-                    && definition.kind === 'enum'
-                    && definition.name === targetEnum
-                    && definition.fileName.includes('igniteui-angular')) {
-                    content = replaceMatch(content, change.member, change.replaceWith, position);
-                    host.overwrite(entryPath, content);
-                }
-            }
-        }
-    }
 };

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

@@ -1441,6 +1441,16 @@
             padding-top: 0 !important;
         }
 
+        .igx-input-group__bundle {
+            border: none !important;
+        }
+
+        igx-prefix,
+        igx-suffix {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+        }
+
         igx-date-range-picker {
             height: 100%;
         }

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -758,6 +758,18 @@ describe('IgxDateRangePicker', () => {
 
                 disabled$.complete();
             }));
+
+            it('should update the calendar while it\'s open and the value has been updated', fakeAsync(() => {
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                const range = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 1)) };
+                dateRange.value = range;
+                fixture.detectChanges();
+
+                expect((dateRange as any).calendar.selectedDates.length).toBeGreaterThan(0);
+            }));
         });
 
         describe('Two Inputs', () => {
@@ -1170,6 +1182,18 @@ describe('IgxDateRangePicker', () => {
                 disabled$.complete();
             }));
 
+            it('should update the calendar while it\'s open and the value has been updated', fakeAsync(() => {
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                const range = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 1)) };
+                dateRange.value = range;
+                fixture.detectChanges();
+
+                expect((dateRange as any).calendar.selectedDates.length).toBeGreaterThan(0);
+            }));
+
             describe('Data binding', () => {
                 it('should properly update component value with ngModel bound to projected inputs - #7353', fakeAsync(() => {
                     fixture = TestBed.createComponent(DateRangeTwoInputsNgModelTestComponent);

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -767,6 +767,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private updateValue(value: DateRange) {
         this._value = value ? value : null;
         this.updateInputs();
+        this.updateCalendar();
     }
 
     private updateValidityOnBlur() {
@@ -847,6 +848,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     }
 
     private updateCalendar(): void {
+        if (!this.calendar) {
+             return;
+        }
         this.calendar.disabledDates = [];
         const minValue = this.parseMinValue(this.minValue);
         if (minValue) {

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

@@ -16,6 +16,7 @@ import { IgxRippleModule } from '../ripple/ripple.directive';
 import { takeUntil } from 'rxjs/operators';
 import { noop, Subject } from 'rxjs';
 import { mkenum } from '../../core/utils';
+import { DeprecateProperty } from '../../core/deprecateDecorators';
 
 /**
  * Determines the Radio Group alignment
@@ -24,7 +25,7 @@ export const RadioGroupAlignment = mkenum({
     horizontal: 'horizontal',
     vertical: 'vertical'
 });
-export type RadioGroupAlignment = (typeof RadioGroupAlignment)[keyof typeof RadioGroupAlignment];
+export type RadioGroupAlignment = typeof RadioGroupAlignment[keyof typeof RadioGroupAlignment];
 
 let nextId = 0;
 
@@ -123,30 +124,35 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
         return this._required;
     }
     public set required(value: boolean) {
-        this._required = (value as any === '') || value;
+        this._required = (value as any) === '' || value;
         this._setRadioButtonsRequired();
     }
 
     /**
      * An @Input property that allows you to disable the radio group. By default it's false.
      *
+     * @deprecated in version 12.2.0
+     *
      * @example
      *  ```html
-     * <igx-radio-group [disabled]="true"></igx-radio-group>
+     * <igx-radio-group disabled></igx-radio-group>
      * ```
      */
+    @DeprecateProperty('`disabled` is deprecated.')
     @Input()
     public get disabled(): boolean {
         return this._disabled;
     }
     public set disabled(value: boolean) {
-        this._disabled = (value as any === '') || value;
+        this._disabled = (value as any) === '' || value;
         this.setDisabledState(value);
     }
 
     /**
      * Sets/gets the position of the `label` in the child radio buttons.
      *
+     * @deprecated in version 12.2.0
+     *
      * @remarks
      * If not set, `labelPosition` will have value `"after"`.
      *
@@ -155,6 +161,7 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
      * <igx-radio-group labelPosition = "before"></igx-radio-group>
      * ```
      */
+    @DeprecateProperty('`labelPosition` is deprecated.')
     @Input()
     public get labelPosition(): RadioLabelPosition | string {
         return this._labelPosition;
@@ -340,10 +347,10 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
      * @hidden
      * @internal
      */
-     public setDisabledState(isDisabled: boolean) {
+    public setDisabledState(isDisabled: boolean) {
         if (this.radioButtons) {
             this.radioButtons.forEach((button) => {
-                button.disabled = isDisabled;
+                button.setDisabledState(isDisabled);
             });
         }
     }
@@ -396,7 +403,7 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
      * @internal
      */
     private _selectedRadioButtonChanged(args: IChangeRadioEventArgs) {
-        this.radioButtons.forEach(button => {
+        this.radioButtons.forEach((button) => {
             button.checked = button.id === args.radio.id;
         });
 
@@ -487,4 +494,4 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
     exports: [IgxRadioGroupDirective, IgxRadioComponent],
     imports: [IgxRippleModule]
 })
-export class IgxRadioModule { }
+export class IgxRadioModule {}