Merge branch 'master' into ibarakov/fix-5280-master

Author: kdinev

CHANGELOG.md

@@ -1,18 +1,27 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+
 ## 10.0.0
 
-### New Features
+### General
+- `igxGrid`
+    - **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
+- `igx-select`, `igx-combo`, `igx-drop-down`
+    - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
+- `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
+    - `origin` - it can vary within the values of the `TransactionEventOrigin` interface; 
+    - `actions` - contains information about the transactions, that caused the emission of the event.
+- `IgxPaginator` - The input `overlaySettings` was introduced, which allows applying custom overlay settings for the component. 
 
+### New Features
 - `IgxGrid`
     - `showGroupArea` input is added, which can be used to enable/disable the group area row.
+    - The event arguments of `onCellEdit`, `onCellEditEnter` and `onCellEditCancel` events will contain a reference to the row data, as well as a reference to the column.
+    - The event arguments of `onRowEdit`, `onRowEditEnter` and `onRowEditCancel` events will contain a reference to the row data.
 
-## 10.0
-
-### General
-- `igx-select`, `igx-combo`, `igx-drop-down`
-- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
+- `IgxSelect` support for `igxHint` directive added.
+    - Allows the user to add `igxHint` to be displayed bellow the input element.
 
 ## 9.1.4
 
@@ -25,7 +34,7 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxHierarchicalGrid`
     - `onGridInitialized` - New output has been exposed. Emitted after a grid is being initialized for the corresponding row island.
-
+-  **Behavioral Change** - When moving a column `DropPosition.None` is now acting like `DropPosition.AfterDropTarget`.
 ## 9.1.0
 
 ### General

ROADMAP.md

@@ -19,19 +19,19 @@ To Be Updated
 
 ## Milestone 11 (Released June 2nd, 2020)
 
-1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
-2. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
-3. Keyboard Navigation Enhancement [#6755](https://github.com/IgniteUI/igniteui-angular/issues/6755)
-4. Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
-5. Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
-6. Splitter [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
-7. Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
-8. Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
-9. Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
-10. Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
-11. Action Strip [#6941](https://github.com/IgniteUI/igniteui-angular/issues/6941)
-12. Theme igx-component scrollbars [#6675](https://github.com/IgniteUI/igniteui-angular/issues/6675)
-13. Use CSS variables by default [#6803](https://github.com/IgniteUI/igniteui-angular/issues/6675)
+1.  **[DONE]** Dock Manger - Public Preview [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
+2.  **[DONE]** Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
+3.  **[DONE]** Keyboard Navigation Enhancement [#6755](https://github.com/IgniteUI/igniteui-angular/issues/6755)
+4.  **[DONE]** Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
+5.  **[DONE]** Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
+6.  **[DONE]** Splitter [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
+7.  **[DONE]** Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
+8.  **[DONE]** Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
+9.  **[DONE]** Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
+10.  **[DONE]** Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
+11.  **[DONE]** Action Strip [#6941](https://github.com/IgniteUI/igniteui-angular/issues/6941)
+12.  **[DONE]** Theme igx-component scrollbars [#6675](https://github.com/IgniteUI/igniteui-angular/issues/6675)
+13.  **[DONE]** Use CSS variables by default [#6803](https://github.com/IgniteUI/igniteui-angular/issues/6675)
 
 ## Milestone 10 (Released February 10th, 2020)
 

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

@@ -387,7 +387,7 @@
         align-items: center;
         padding: 0 rem(16px);
 
-        igx-input-group {
+        igx-select {
             flex-grow: 1;
             flex-basis: 40%;
             margin: rem(16px) 0;

projects/igniteui-angular/src/lib/data-operations/groupby-record.interface.ts

@@ -1,4 +1,5 @@
 import { ISortingExpression } from './sorting-expression.interface';
+import { IgxColumnComponent } from '../grids/columns/column.component';
 
 /**
  * @hidden
@@ -13,4 +14,5 @@ export interface IGroupByRecord {
     groupParent: IGroupByRecord;
     groups?: IGroupByRecord[];
     height: number;
+    column?: IgxColumnComponent;
  }

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts

@@ -160,14 +160,16 @@ export class IgxSorting implements IGridSortingStrategy {
         let result = [];
         while (i < data.length) {
             const group = this.groupedRecordsByExpression(data, i, expressions[level]);
+            const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null;
             const groupRow: IGroupByRecord = {
                 expression: expressions[level],
                 level,
                 records: cloneArray(group),
                 value: group[0][expressions[level].fieldName],
                 groupParent: parent,
                 groups: [],
-                height: grid ? grid.renderedRowHeight : null
+                height: grid ? grid.renderedRowHeight : null,
+                column: column
             };
             if (parent) {
                 parent.groups.push(groupRow);

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

@@ -132,6 +132,22 @@ describe('IgxDatePicker', () => {
             expect(inputGroup.nativeElement.classList.contains('igx-input-group--disabled')).toBeTruthy();
         });
 
+        it('should not be able to toggle & clear when disabled', () => {
+            const date = new Date();
+            datePicker.value = date;
+            datePicker.disabled = true;
+            fixture.detectChanges();
+            expect(datePicker.collapsed).toBeTruthy();
+
+            datePicker.openDialog();
+            fixture.detectChanges();
+            expect(datePicker.collapsed).toBeTruthy();
+
+            datePicker.clear();
+            fixture.detectChanges();
+            expect(datePicker.value).toEqual(date);
+        });
+
         it('When labelVisability is set to false the label should not be visible', () => {
             let label = fixture.debugElement.query(By.directive(IgxLabelDirective));
 

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

@@ -34,7 +34,7 @@ import { IgxInputGroupModule, IgxInputDirective, IgxInputGroupComponent, IgxInpu
 import { Subject, fromEvent, animationFrameScheduler, interval, Subscription } from 'rxjs';
 import { filter, takeUntil, throttle } from 'rxjs/operators';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
-import { IgxTextSelectionModule} from '../directives/text-selection/text-selection.directive';
+import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
 import {
     OverlaySettings,
     IgxOverlayService,
@@ -144,7 +144,7 @@ const noop = () => { };
     `]
 })
 export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor,
-          EditorProvider, OnInit, AfterViewInit, OnDestroy, AfterViewChecked {
+    EditorProvider, OnInit, AfterViewInit, OnDestroy, AfterViewChecked {
     /**
      * Gets/Sets the `IgxDatePickerComponent` label.
      * @remarks
@@ -914,10 +914,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * @param date passed date that has to be set to the calendar.
      */
     public selectDate(date: Date): void {
-        const oldValue =  this.value;
+        const oldValue = this.value;
         this.value = date;
 
-        this.emitValueChangeEvent(oldValue, this.value );
+        this.emitValueChangeEvent(oldValue, this.value);
         this.onSelection.emit(date);
     }
 
@@ -929,9 +929,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * ```
      */
     public deselectDate(): void {
-        const oldValue =  this.value;
+        const oldValue = this.value;
         this.value = null;
-        this.emitValueChangeEvent(oldValue, this.value );
+        this.emitValueChangeEvent(oldValue, this.value);
         if (this.calendar) {
             this.calendar.deselectDate();
         }
@@ -946,7 +946,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * ```
      */
     public openDialog(): void {
-        if (!this.collapsed) {
+        if (!this.collapsed || this.disabled) {
             return;
         }
 
@@ -987,10 +987,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * @hidden @internal
      */
     public clear(): void {
-        this.isEmpty = true;
-        this.invalidDate = '';
-        this.deselectDate();
-        this._setCursorPosition(0);
+        if (!this.disabled) {
+            this.isEmpty = true;
+            this.invalidDate = '';
+            this.deselectDate();
+            this._setCursorPosition(0);
+        }
     }
 
     /**
@@ -1008,10 +1010,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
             date.setSeconds(this.value.getSeconds());
             date.setMilliseconds(this.value.getMilliseconds());
         }
-        const oldValue =  this.value;
+        const oldValue = this.value;
         this.value = date;
 
-        this.emitValueChangeEvent(oldValue, this.value );
+        this.emitValueChangeEvent(oldValue, this.value);
         this.calendar.viewDate = date;
         this.closeCalendar();
         this.onSelection.emit(date);
@@ -1141,11 +1143,11 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
                 if (this.disabledDates === null
                     || (this.disabledDates !== null && !isDateInRanges(newValue, this.disabledDates))) {
-                        const oldValue =  this.value;
-                        this.value = newValue;
+                    const oldValue = this.value;
+                    this.value = newValue;
 
-                        this.emitValueChangeEvent(oldValue, this.value );
-                        this.invalidDate = '';
+                    this.emitValueChangeEvent(oldValue, this.value);
+                    this.invalidDate = '';
                 } else {
                     const args: IDatePickerDisabledDateEventArgs = {
                         datePicker: this,

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

@@ -586,6 +586,34 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     verifyDateRange();
                 });
+
+                it('should select a range from the calendar only when the two inputs are filled in', fakeAsync(() => {
+                    fixture.componentInstance.mode = InteractionMode.DropDown;
+                    fixture.detectChanges();
+
+                    startInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateTyping('11/10/2015', startInput);
+
+                    fixture.componentInstance.dateRange.open();
+                    tick();
+                    fixture.detectChanges();
+                    expect(fixture.componentInstance.dateRange.calendar.selectedDates.length).toBe(0);
+
+                    UIInteractions.triggerEventHandlerKeyDown('Escape', calendar);
+                    tick();
+                    fixture.detectChanges();
+
+                    endInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateTyping('11/16/2015', endInput);
+                    fixture.detectChanges();
+
+                    fixture.componentInstance.dateRange.open();
+                    tick();
+                    fixture.detectChanges();
+                    expect(fixture.componentInstance.dateRange.calendar.selectedDates.length).toBe(7);
+                }));
             });
 
             describe('Keyboard navigation', () => {