Merge remote-tracking branch 'remotes/origin/master' into mvenkov/handle_correctly_target_as_point

# Conflicts:
#	projects/igniteui-angular/src/lib/services/overlay/overlay.ts

Author: wnvko

CHANGELOG.md

@@ -4,24 +4,47 @@ All notable changes for each version of this project will be documented in this
 ## 10.2.0
 
 ### General
-- `IgxDatePicker`
-    - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
+- `IgxGridActions`
+    - Added `asMenuItems` Input for grid actions - `igx-grid-editing-actions`, `igx-grid-pinning-actions`. When set to true will render the related action buttons as separate menu items with button and label.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Behavioral Change** - The Excel Style Filtering has been reworked to provide filtering experience such as in Excel. This includes the following changes:
+        - You can close the Excel Style Filtering menu by pressing `Ctrl + Shift + L`.
+        - You can apply the filter by pressing `Enter`.
+        - When searching items in the Excel Style Filtering menu, only the rows that match your search term will be filtered in.
+        - By checking the `Add current selection to filter` option, the new search results will be added to the previously filtered items.
 - `IgxInputGroup`
     - **Breaking Change** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property.
     - **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Rename outputs**
+        `onRowEditEnter` to `rowEditEnter`
+        `onCellEditEnter` to `cellEditEnter`
+        `onCellEdit` to `cellEdit`
+        `onRowEdit` to `rowEdit`
+    - **Breaking Change** - The `onCellEditCancel` event is replaced by the new `cellEditExit` event that emits every time the editable cell exits edit mode.
+    - **Breaking Change** - The `onRowEditCancel` event is replaced by the new `rowEditExit` event that emits every time the editable row exits edit mode.
 - `IgxOverlay`
     - **Breaking Change** - `target` property in `PositionSettings` has been deprecated. You can set the attaching target for the component to show in `OverlaySettings` instead.
+- `IgxToggleDirective`
+    - `onAppended`, `onOpened` and `onClosed` events are emitting now arguments of `ToggleViewEventArgs` type.
+    - `onOpening` and `onClosing` events are emitting now arguments of `ToggleViewCancelableEventArgs` type.
 - `IgxSelect`
     - Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
 - `IgxDatePicker`	
     - **Breaking Change** - Deprecated the `label` property.
-- `igxGridActions`
-    - Added `asMenuItems` Input for grid actions - `igx-grid-editing-actions`, `igx-grid-pinning-actions`. When set to true will render the related action buttons as separate menu items with button and label.
-
+    - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
+- `igxNavigationDrawer`
+    - Added `disableAnimation` property which enables/disables the animation, when toggling the drawer. Set to `false` by default.
+- `igxTabs`
+    - Added `disableAnimation` property which enables/disables the transition animation of the tabs' content. Set to `false` by default.
+- `IgxExpansionPanel`
+    - `IExpansionPanelEventArgs.panel` - Deprecated. Usе `owner` property to get a reference to the panel. 
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
+    - `cellEditExit` is a new event that fires when cell exits edit mode
+    - `rowEditExit` is a new event that fires when row exits edit mode
     - Added *getRowData(rowSelector)* method that returns an object that represents the data that is contained in the specified row component.
     - Added ability to spawn row adding UI through exoposed methods. Note that rowEditing should be enabled.
         - `beginAddRow` method which starts the adding row UI.
@@ -54,6 +77,9 @@ All notable changes for each version of this project will be documented in this
     - The component now utilizes the `IgxOverlayService` to position itself in the DOM.
     - An additional input property `outlet` has been added to allow users to specify custom Overlay Outlets using the `IgxOverlayOutletDirective`;
     - The `position` property now accepts values of type `IgxToastPosition` that work with strict templates.
+- `IgxExpansionPanelHeader`
+    - `onInteraction` is now cancelable
+    - Added `iconRef` property. This can be used to get a reference to the displayed expand/collapsed indicator. Returns `null` if `iconPosition` is set to `NONE`.
 
 ## 10.1.0
 

projects/igniteui-angular/migrations/update-10_2_0/changes/outputs.json

@@ -0,0 +1,149 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "onCellEditCancel",
+            "replaceWith": "cellEditExit",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onCellEditCancel",
+            "replaceWith": "cellEditExit",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onCellEditCancel",
+            "replaceWith": "cellEditExit",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onRowEditCancel",
+            "replaceWith": "rowEditExit",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onRowEditCancel",
+            "replaceWith": "rowEditExit",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onRowEditCancel",
+            "replaceWith": "rowEditExit",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onRowEditEnter",
+            "replaceWith": "rowEditEnter",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onRowEditEnter",
+            "replaceWith": "rowEditEnter",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onRowEditEnter",
+            "replaceWith": "rowEditEnter",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onCellEditEnter",
+            "replaceWith": "cellEditEnter",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onCellEditEnter",
+            "replaceWith": "cellEditEnter",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onCellEditEnter",
+            "replaceWith": "cellEditEnter",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onCellEdit",
+            "replaceWith": "cellEdit",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onCellEdit",
+            "replaceWith": "cellEdit",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onCellEdit",
+            "replaceWith": "cellEdit",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onRowEdit",
+            "replaceWith": "rowEdit",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onRowEdit",
+            "replaceWith": "rowEdit",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onRowEdit",
+            "replaceWith": "rowEdit",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        }
+    ]
+}

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

@@ -69,7 +69,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         }
         // be sure row is in view
         if (grid.rowList.filter(r => r === row).length !== 0) {
-            grid.crudService.begin(firstEditable);
+            grid.crudService.enterEditMode(firstEditable);
         }
         this.strip.hide();
     }

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

@@ -19,7 +19,6 @@ import { DisplayDensity } from '../core/density';
 import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/public_api';
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxIconService } from '../icon/public_api';
-import { CancelableEventArgs } from '../core/utils';
 
 const CSS_CLASS_COMBO = 'igx-combo';
 const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -602,6 +601,38 @@ describe('igxCombo', () => {
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(1);
             expect(matchSpy).toHaveBeenCalledTimes(1);
         });
+        it('should not open on click if combo is disabled', () => {
+            combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService,
+                mockIconService, null, null, mockInjector);
+            const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['open', 'close', 'toggle']);
+            const spyObj = jasmine.createSpyObj('event', ['stopPropagation', 'preventDefault']);
+            spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
+            combo.ngOnInit();
+            combo.dropdown = dropdown;
+            dropdown.collapsed = true;
+
+            combo.disabled = true;
+            combo.onInputClick(spyObj);
+            expect(combo.dropdown.collapsed).toBeTruthy();
+        });
+        it('should not clear value when combo is disabled', () => {
+            const selectionService = new IgxSelectionAPIService();
+            combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService,
+                mockIconService, null, null, mockInjector);
+            const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
+            const spyObj = jasmine.createSpyObj('event', ['stopPropagation']);
+            spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
+            combo.ngOnInit();
+            combo.data = data;
+            combo.dropdown = dropdown;
+            combo.disabled = true;
+            spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length);
+
+            const item = combo.data.slice(0, 1);
+            combo.selectItems(item, true);
+            combo.handleClearItems(spyObj);
+            expect(combo.value).toEqual(item[0]);
+        });
     });
     describe('Initialization and rendering tests: ', () => {
         configureTestSuite();
@@ -2541,13 +2572,6 @@ describe('igxCombo', () => {
                 expect(combo.valid).toEqual(IgxComboState.INITIAL);
                 expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
             });
-            it('should not open on click if combo is disabled', () => {
-                combo.disabled = true;
-                fixture.detectChanges();
-                UIInteractions.simulateClickEvent(combo.comboInput.nativeElement);
-                fixture.detectChanges();
-                expect(combo.dropdown.collapsed).toBeTruthy();
-            });
             it('should be possible to be enabled/disabled when used as a form control', () => {
                 const form = fixture.componentInstance.reactiveForm;
                 const comboFormReference = form.controls.townCombo;

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

@@ -185,13 +185,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private _remoteSelection = {};
     private _onChangeCallback: (_: any) => void = noop;
     private _onTouchedCallback: () => void = noop;
-    private _overlaySettings: OverlaySettings = {
-        scrollStrategy: new AbsoluteScrollStrategy(),
-        positionStrategy: new AutoPositionStrategy(),
-        modal: false,
-        closeOnOutsideClick: true,
-        excludePositionTarget: true
-    };
+    private _overlaySettings: OverlaySettings;
     private _value = '';
     private _valid = IgxComboState.INITIAL;
     constructor(
@@ -1228,7 +1222,15 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public ngOnInit() {
         this.ngControl = this._injector.get<NgControl>(NgControl, null);
-        this._overlaySettings.target = this.elementRef.nativeElement;
+        const targetElement = this.elementRef.nativeElement;
+        this._overlaySettings = {
+            target: targetElement,
+            scrollStrategy: new AbsoluteScrollStrategy(),
+            positionStrategy: new AutoPositionStrategy(),
+            modal: false,
+            closeOnOutsideClick: true,
+            excludeFromOutsideClick: [targetElement as HTMLElement]
+        };
         this.selection.set(this.id, new Set());
         this._iconService.addSvgIconFromText(caseSensitiveIcon.name, caseSensitiveIcon.value, 'case-sensitive');
     }
@@ -1324,6 +1326,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * @hidden @internal
      */
     public handleClearItems(event: Event): void {
+        if (this.disabled) {
+            return;
+        }
         this.deselectAllItems(true, event);
         if (this.collapsed) {
             this.getEditElement().focus();

projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts

@@ -64,6 +64,8 @@ export interface IGridResourceStrings {
     igx_grid_excel_apply?: string;
     igx_grid_excel_search_placeholder?: string;
     igx_grid_excel_select_all?: string;
+    igx_grid_excel_select_all_search_results?: string;
+    igx_grid_excel_add_to_filter?: string;
     igx_grid_excel_blanks?: string;
     igx_grid_excel_hide?: string;
     igx_grid_excel_show?: string;
@@ -174,6 +176,8 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_apply: 'apply',
     igx_grid_excel_search_placeholder: 'Search',
     igx_grid_excel_select_all: 'Select All',
+    igx_grid_excel_select_all_search_results: 'Select all search results',
+    igx_grid_excel_add_to_filter: 'Add current selection to filter',
     igx_grid_excel_blanks: '(Blanks)',
     igx_grid_excel_hide: 'Hide column',
     igx_grid_excel_show: 'Show column',

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -4,7 +4,7 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
-///
+
 /// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss

@@ -84,4 +84,8 @@
     @include e(item, header) {
         @extend %item--header !optional;
     }
+
+    @include m(disable-animation) {
+        @extend %disable-animation !optional;
+    }
 }

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -434,6 +434,10 @@
         transition: none;
         visibility: hidden;
     }
+
+    %disable-animation {
+        transition-duration: 0s;
+    }
 }
 
 /// Adds typography styles for the igx-navdrawer component.

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

@@ -609,7 +609,7 @@ $_bootstrap-grid: extend(
 /// @prop {Color} header-text-color [igx-color: 'primary'] - The table header text color.
 /// @prop {Map} header-selected-background [igx-color: ('primary', 50)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [igx-color: 'primary'] - The table header text color when selected (ex. column selection).
-/// @prop {Map} header-border-color [igx-color: ('primary', 100)] - The color used for header borders.
+/// @prop {Map} header-border-color [igx-color: ('primary', 500), rgba: .24] - The color used for header borders.
 ///
 /// @prop {Map} filtering-header-text-color [igx-color: ('primary', 900)] - The text color color of the filtered column header.
 /// @prop {Map} filtering-background-or [igx-color: 'warn'] - The background color of advanced filtering "OR" condition.
@@ -678,7 +678,8 @@ $_indigo-grid: extend(
         ),
 
         header-border-color: (
-            igx-color: ('primary', 100)
+            igx-color: ('primary', 500),
+            rgba: .24
         ),
 
         filtering-header-text-color: (