Merge branch 'mkirova/add-row-pinning-integration' of https://github.com/IgniteUI/igniteui-angular.git

Author: MKirova

CHANGELOG.md

@@ -4,19 +4,27 @@ 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.
 - `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.
 - `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
@@ -54,6 +62,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/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

@@ -1324,6 +1324,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/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: (

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

@@ -410,7 +410,7 @@ describe('IgxDateRangePicker', () => {
                     verifyDateRangeInSingleInput();
                     expect(dateRange.collapsed).toBeTruthy();
                     expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: undefined });
+                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onClosed.emit).toHaveBeenCalledWith({ owner: dateRange });
                 }));
@@ -473,7 +473,7 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     expect(dateRange.collapsed).toBeFalsy();
                     expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ cancel: false });
+                    expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onOpened.emit).toHaveBeenCalledWith({ owner: dateRange });
 
@@ -490,7 +490,7 @@ describe('IgxDateRangePicker', () => {
                     verifyDateRangeInSingleInput();
                     expect(dateRange.collapsed).toBeTruthy();
                     expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: undefined });
+                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onClosed.emit).toHaveBeenCalledWith({ owner: dateRange });
                 }));
@@ -506,7 +506,7 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     expect(dateRange.collapsed).toBeFalsy();
                     expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ cancel: false });
+                    expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onOpened.emit).toHaveBeenCalledWith({ owner: dateRange });
 
@@ -522,7 +522,7 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     expect(dateRange.collapsed).toBeTruthy();
                     expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: undefined });
+                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onClosed.emit).toHaveBeenCalledWith({ owner: dateRange });
                 }));

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

@@ -659,8 +659,12 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
 
     /** @hidden @internal */
     public handleOpening(event: CancelableBrowserEventArgs & IBaseEventArgs): void {
-        this.onOpening.emit(event);
-        this._collapsed = false;
+        const args = { owner: this, cancel: event.cancel, event: event.event };
+        this.onOpening.emit(args);
+        event.cancel = args.cancel;
+        if (!args.cancel) {
+            this._collapsed = false;
+        }
     }
 
     /** @hidden @internal */
@@ -675,7 +679,12 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
             this.value = null;
         }
 
-        this.onClosing.emit(event);
+        const args = { owner: this, cancel: event.cancel, event: event.event };
+        this.onClosing.emit(args);
+        event.cancel = args.cancel;
+        if (args.cancel) {
+            return;
+        }
 
         if (this.mode === InteractionMode.DropDown && event.event && !this.element.nativeElement.contains(event.event.target)) {
             // outside click

projects/igniteui-angular/src/lib/directives/toggle/README.md

@@ -29,8 +29,8 @@ handlers when the toggle is opened and respectively closed.
 ```html
 <button (click)="toggleRef.toggle()">Toggle</button>
 <div igxToggle #toggleRef="toggle" 
-    (onOpening)="eventHandler()" (onAppended)="eventHandler()" (onOpened)="eventHandler()"
-    (onClosing)="eventHandler()" (onClosed)="eventHandler()" >
+    (onOpening)="eventHandler($event)" (onAppended)="eventHandler($event)" (onOpened)="eventHandler($event)"
+    (onClosing)="eventHandler($event)" (onClosed)="eventHandler($event)" >
     <p>Some content that user would like to make it togglable.</p>
 </div>
 ```
@@ -40,11 +40,11 @@ handlers when the toggle is opened and respectively closed.
 ### Outputs
 | Name | Return Type | Description |
 |:--:|:---|:---|
-| `onAppended`   | `void` | Emits an event after content is appended to the overlay.         |
-| `onOpening`    | `void` | Emits an event before the toggle container is opened.            |
-| `onOpened`     | `void` | Emits an event after the toggle container is opened.             |
-| `onClosing`    | `void` | Emits an event before the toggle container is closed.            |
-| `onClosed`     | `void` | Emits an event after the toggle container is closed.             |
+| `onAppended`   | `ToggleViewEventArgs`           | Emits an event after content is appended to the overlay.         |
+| `onOpening`    | `ToggleViewCancelableEventArgs` | Emits an event before the toggle container is opened.            |
+| `onOpened`     | `ToggleViewEventArgs`           | Emits an event after the toggle container is opened.             |
+| `onClosing`    | `ToggleViewCancelableEventArgs` | Emits an event before the toggle container is closed.            |
+| `onClosed`     | `ToggleViewEventArgs`           | Emits an event after the toggle container is closed.             |
 ### Methods
 | Name   | Arguments | Return Type | Description |
 |:----------:|:------|:------|:------|