Merge branch 'master' into valadzhov/tab-nav-drawer-animation-7157

CHANGELOG.md

@@ -21,6 +21,9 @@ All notable changes for each version of this project will be documented in this
     - 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`
@@ -57,6 +60,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/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 {}

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

@@ -119,10 +119,7 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
     /**
      * Emitted when the expansion panel finishes collapsing
      * ```typescript
-     *  handleCollapsed(event: {
-     *  panel: IgxExpansionPanelComponent,
-     *  event: Event
-     * })
+     *  handleCollapsed(event: IExpansionPanelEventArgs)
      * ```
      * ```html
      *  <igx-expansion-panel (onCollapsed)="handleCollapsed($event)">
@@ -136,10 +133,7 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
     /**
      * Emitted when the expansion panel finishes expanding
      * ```typescript
-     *  handleExpanded(event: {
-     *  panel: IgxExpansionPanelComponent,
-     *  event: Event
-     * })
+     *  handleExpanded(event: IExpansionPanelEventArgs)
      * ```
      * ```html
      *  <igx-expansion-panel (onExpanded)="handleExpanded($event)">
@@ -229,7 +223,7 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
         }
         this.playCloseAnimation(
             () => {
-                this.onCollapsed.emit({ event: evt, panel: this });
+                this.onCollapsed.emit({ event: evt, panel: this, owner: this });
                 this.collapsed = true;
             }
         );
@@ -253,7 +247,7 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
         this.cdr.detectChanges();
         this.playOpenAnimation(
             () => {
-                this.onExpanded.emit({ event: evt, panel: this });
+                this.onExpanded.emit({ event: evt, panel: this, owner: this });
             }
         );
     }

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

@@ -1,7 +1,7 @@
 import { Directive, HostBinding } from '@angular/core';
 
 /**
- * @hidden
+ * @hidden @internal
  */
 @Directive({
     // tslint:disable-next-line:directive-selector
@@ -13,7 +13,7 @@ export class IgxExpansionPanelTitleDirective {
 }
 
 /**
- * @hidden
+ * @hidden @internal
  */
 @Directive({
     // tslint:disable-next-line:directive-selector
@@ -25,7 +25,7 @@ export class IgxExpansionPanelDescriptionDirective {
 }
 
 /**
- * @hidden
+ * @hidden @internal
  */
 @Directive({
     // tslint:disable-next-line:directive-selector