chore(expansion-panel): address review comments

Author: ViktorSlavov

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
@@ -89,7 +89,7 @@ The following outputs are available in the **igx-expansion-panel-header** compon
 
 | Name | Cancelable | Description | Parameters
 | :--- | :--- | :--- | :--- |
-| `onInteraction` | `true` | Emitted when a user interacts with the header host | `{ event: Event, panel: IgxExpansionPanelComponent, cancel: boolean }` |
+| `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

@@ -49,17 +49,15 @@ export class IgxExpansionPanelHeaderComponent {
     private customIconRef: ElementRef;
 
     /** @hidden @internal */
-    @ViewChild(IgxIconComponent, { read: IgxIconComponent })
-    public defaultIconRef: IgxIconComponent;
+    @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 defaultRef = this.defaultIconRef ? this.defaultIconRef.el : null;
-        const customRef = this.customIconRef ? this.customIconRef : null;
-        const renderedTemplate = this.iconTemplate ? customRef : defaultRef;
+        const renderedTemplate = this.customIconRef  ?? this.defaultIconRef;
         return this.iconPosition !== ICON_POSITION.NONE ? renderedTemplate : null;
     }
 
@@ -141,7 +139,7 @@ export class IgxExpansionPanelHeaderComponent {
     /**
      * Emitted whenever a user interacts with the header host
      * ```typescript
-     *  handleInteraction(event: IExpansionPanelCancelabelEventArgs) {
+     *  handleInteraction(event: IExpansionPanelCancelableEventArgs) {
      *  ...
      * }
      * ```

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)">

src/app/expansion-panel/expansion-panel-sample.html

@@ -7,7 +7,7 @@
     <div class="game-board">
         <igx-expansion-panel [animationSettings]="animationSettings" class="game-board__collapsible" (onCollapsed)="handleCollapsed($event)"
             (onExpanded)="handleExpanded($event)" #collapsibleComponent [collapsed]="false">
-            <igx-expansion-panel-header [iconPosition]="iconPosition" (onInterraction)="onInterraction($event)"
+            <igx-expansion-panel-header [iconPosition]="iconPosition" (onInteraction)="onInteraction($event)"
                 [disabled]="false">
                 <igx-expansion-panel-title>Current Winning Player:</igx-expansion-panel-title>
                 <igx-expansion-panel-description>{{ getWinningPlayer }}</igx-expansion-panel-description>

src/app/expansion-panel/expansion-panel-sample.ts

@@ -1,4 +1,4 @@
-import { IgxExpansionPanelComponent, growVerIn, growVerOut, scaleInVerTop } from 'igniteui-angular';
+import { IgxExpansionPanelComponent, growVerIn, growVerOut, scaleInVerTop, IExpansionPanelEventArgs } from 'igniteui-angular';
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { AnimationReferenceMetadata, useAnimation } from '@angular/animations';
 
@@ -83,7 +83,8 @@ export class ExpansionPanelSampleComponent implements OnInit {
     handleExpanded(event) {
         console.log(`I'm expanding!`, event);
     }
-    onInterraction(event) {
+    onInteraction(event: IExpansionPanelEventArgs) {
+        console.log(event.owner);
         console.log(`Header's touched!`, event);
     }