Merge branch 'master' into mvenkov/update-toggle-event-emitters

Author: Lipata

CHANGELOG.md

@@ -4,22 +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.
-- `IgxToggleDirective`
-    - `onAppended`, `onOpened` and `onClosed` events are emitting now arguments of `ToggleViewEventArgs` type.
-    - `onOpening` and `onClosing` events are emitting now arguments of `ToggleViewCancelableEventArgs` type.
+    - 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
@@ -57,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/utils.ts

@@ -324,7 +324,7 @@ export const NAVIGATION_KEYS = new Set([
 ]);
 export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
 export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
-export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
+export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup', '+']);
 export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l']);
 
 /**

projects/igniteui-angular/src/lib/expansion-panel/README.md

@@ -56,8 +56,8 @@ The following outputs are available in the **igx-expansion-panel** component:
 
 | Name | Cancelable | Description | Parameters
 | :--- | :--- | :--- | :--- |
-| `onCollapsed` | `false` | Emitted when the panel is collapsed | `{ event: Event, panel: IgxExpansionPanelComponent }` |
-| `onExpanded` | `false` | Emitted when the panel is expanded | `{ event: Event, panel: IgxExpansionPanelComponent }` |
+| `onCollapsed` | `false` | Emitted when the panel is collapsed | `IExpansionPanelEventArgs` |
+| `onExpanded` | `false` | Emitted when the panel is expanded | `IExpansionPanelEventArgs` |
 
 
 ### Methods
@@ -81,14 +81,15 @@ The following inputs are available in the **igx-expansion-panel-header** compone
 | `role` | `string` | The `role` attribute of the header |
 | `iconPosition` | `string` | The position of the expand/collapse icon of the header |
 | `disabled` | `boolean` | Gets/sets whether the panel header is disabled (blocking user interaction) or not |
+| `iconRef` | `ElementRef` | Gets the reference to the element being used as expand/collapse indicator. If `iconPosition` is `NONE` - return `null` |
 
 
 ### Outputs
 The following outputs are available in the **igx-expansion-panel-header** component:
 
 | Name | Cancelable | Description | Parameters
 | :--- | :--- | :--- | :--- |
-| `onInteraction` | `false` | Emitted when a user interacts with the header host | `{ event: Event, panel: IgxExpansionPanelComponent }` |
+| `onInteraction` | `true` | Emitted when a user interacts with the header host | `IExpansionPanelCancelableEventArgs` |
 
 ## IgxExpansionPanelBodyComponent
 ### Inputs

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts

@@ -9,11 +9,13 @@ import {
     EventEmitter,
     Output,
     ContentChild,
-    Inject
+    Inject,
+    ViewChild
 } from '@angular/core';
 import { IgxExpansionPanelIconDirective } from './expansion-panel.directives';
-import { IExpansionPanelEventArgs, IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase } from './expansion-panel.common';
+import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase, IExpansionPanelCancelableEventArgs  } from './expansion-panel.common';
 import { mkenum } from '../core/utils';
+import { IgxIconComponent } from '../icon/public_api';
 
 /**
  * @hidden
@@ -42,6 +44,23 @@ export class IgxExpansionPanelHeaderComponent {
      */
     public id = '';
 
+    /** @hidden @internal */
+    @ContentChild(IgxExpansionPanelIconDirective, { read: ElementRef })
+    private customIconRef: ElementRef;
+
+    /** @hidden @internal */
+    @ViewChild(IgxIconComponent, { read: ElementRef })
+    public defaultIconRef: ElementRef;
+
+    /**
+     * Returns a reference to the `igx-expansion-panel-icon` element;
+     * If `iconPosition` is `NONE` - return null;
+     */
+    public get iconRef(): ElementRef {
+        const renderedTemplate = this.customIconRef  ?? this.defaultIconRef;
+        return this.iconPosition !== ICON_POSITION.NONE ? renderedTemplate : null;
+    }
+
     /**
      * @hidden
      */
@@ -120,7 +139,7 @@ export class IgxExpansionPanelHeaderComponent {
     /**
      * Emitted whenever a user interacts with the header host
      * ```typescript
-     *  handleInteraction(event: IExpansionPanelEventArgs) {
+     *  handleInteraction(event: IExpansionPanelCancelableEventArgs) {
      *  ...
      * }
      * ```
@@ -131,7 +150,7 @@ export class IgxExpansionPanelHeaderComponent {
      * ```
      */
     @Output()
-    public onInteraction = new EventEmitter<IExpansionPanelEventArgs>();
+    public onInteraction = new EventEmitter<IExpansionPanelCancelableEventArgs >();
 
     /**
      * @hidden
@@ -185,7 +204,11 @@ export class IgxExpansionPanelHeaderComponent {
             evt.stopPropagation();
             return;
          }
-         this.onInteraction.emit({ event: evt, panel: this.panel });
+         const eventArgs: IExpansionPanelCancelableEventArgs  = { event: evt, panel: this.panel, owner: this.panel, cancel: false };
+         this.onInteraction.emit(eventArgs);
+         if (eventArgs.cancel === true) {
+             return;
+         }
          this.panel.toggle(evt);
          evt.preventDefault();
      }
@@ -194,17 +217,25 @@ export class IgxExpansionPanelHeaderComponent {
     @HostListener('keydown.Alt.ArrowDown', ['$event'])
     public openPanel(event: KeyboardEvent) {
         if (event.altKey) {
+            const eventArgs: IExpansionPanelCancelableEventArgs  = { event, panel: this.panel, owner: this.panel, cancel: false };
+            this.onInteraction.emit(eventArgs);
+            if (eventArgs.cancel === true) {
+                return;
+            }
             this.panel.expand(event);
-            this.onInteraction.emit({ event: event, panel: this.panel });
         }
      }
 
      /** @hidden @internal */
      @HostListener('keydown.Alt.ArrowUp', ['$event'])
      public closePanel(event: KeyboardEvent) {
         if (event.altKey) {
+            const eventArgs: IExpansionPanelCancelableEventArgs  = { event, panel: this.panel, owner: this.panel, cancel: false };
+            this.onInteraction.emit(eventArgs);
+            if (eventArgs.cancel === true) {
+                return;
+            }
             this.panel.collapse(event);
-            this.onInteraction.emit({ event: event, panel: this.panel });
         }
      }
 

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.common.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, InjectionToken } from '@angular/core';
 import { AnimationReferenceMetadata } from '@angular/animations';
-import { IBaseEventArgs } from '../core/utils';
+import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
 
 export interface IgxExpansionPanelBase {
     id: string;
@@ -21,5 +21,11 @@ export const IGX_EXPANSION_PANEL_COMPONENT = new InjectionToken<IgxExpansionPane
 
 export interface IExpansionPanelEventArgs extends IBaseEventArgs {
     event: Event;
-    panel: IgxExpansionPanelBase;
+    /**
+     * @deprecated
+     * To get a reference to the panel, use `owner` instead.
+     */
+    panel?: IgxExpansionPanelBase;
 }
+
+export interface IExpansionPanelCancelableEventArgs  extends IExpansionPanelEventArgs, CancelableEventArgs {}