refactor(igxBanner): refactor banner, tests WIP

projects/igniteui-angular/src/lib/banner/banner.component.html

@@ -1,25 +1,27 @@
-<igx-expansion-panel #expansionPanel (onCollapsed)="onExpansionPanelClose($event)" (onExpanded)="onExpansionPanelOpen($event)" [collapsed]="collapsed">
+<igx-expansion-panel #expansionPanel (onCollapsed)="onExpansionPanelClose()" (onExpanded)="onExpansionPanelOpen()"
+    [collapsed]="collapsed">
     <igx-expansion-panel-body>
-        <div class="igx-banner" *ngIf="useDefaultTemplate">
+        <div class="igx-banner">
             <div class="igx-banner__message">
-                <div class="igx-banner__illustration">
-                    <igx-icon *ngIf="icon" fontSet="material">{{icon}}</igx-icon>
+                <div *ngIf="bannerIcon" class="igx-banner__illustration">
+                    <ng-content select="igx-icon"></ng-content>
                 </div>
                 <span class="igx-banner__text">
-                    {{message}}
+                    <ng-content></ng-content>
                 </span>
             </div>
             <div class="igx-banner__actions">
                 <div class="igx-banner__row">
-                    <button igxButton="flat" igxRipple #dismissButton *ngIf="dismissButtonText" (click)="dismiss()">
-                        {{dismissButtonText}}
-                    </button>
-                    <button igxButton="flat" igxRipple #confirmButton *ngIf="confirmButtonText" (click)="confirm()">
-                        {{confirmButtonText}}
-                    </button>
+                    <ng-container *ngIf="useDefaultTemplate">
+                        <button igxButton="flat" igxRipple (click)="close()">
+                            Dismiss
+                        </button>
+                    </ng-container>
+                    <ng-container *ngIf="!useDefaultTemplate">
+                        <ng-content select="igx-banner-actions"></ng-content>
+                    </ng-container>
                 </div>
             </div>
         </div>
-        <ng-content *ngIf="!useDefaultTemplate"></ng-content>
     </igx-expansion-panel-body>
-</igx-expansion-panel>
+</igx-expansion-panel>

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

@@ -1,15 +1,18 @@
-import { Component, NgModule, EventEmitter, Output, Input, ViewChild, ElementRef } from '@angular/core';
+import { Component, NgModule, EventEmitter, Output, Input, ViewChild, ElementRef, ContentChild } from '@angular/core';
 import { IgxExpansionPanelModule } from '../expansion-panel/expansion-panel.module';
+import { AnimationSettings } from '../expansion-panel/expansion-panel.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { IgxExpansionPanelComponent } from '../expansion-panel';
-import { IgxIconModule } from '../icon/index';
+import { IgxIconModule, IgxIconComponent } from '../icon/index';
 import { IToggleView } from '../core/navigation';
 import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
+import { IgxBannerActionsDirective } from './banner.directives';
+import { AnimationReferenceMetadata } from '@angular/animations';
 
 export interface BannerEventArgs {
     banner: IgxBannerComponent;
-    button?: string;
+    event?: Event;
 }
 
 @Component({
@@ -18,10 +21,20 @@ export interface BannerEventArgs {
 })
 export class IgxBannerComponent implements IToggleView {
     private _bannerEvent: BannerEventArgs;
+    private _animationSettings: AnimationSettings;
 
     @ViewChild('expansionPanel')
     private _expansionPanel: IgxExpansionPanelComponent;
 
+    @ContentChild(IgxBannerActionsDirective)
+    private _bannerActionTemplate: any;
+
+    /**
+     * @hidden
+     */
+    @ContentChild(IgxIconComponent)
+    public bannerIcon: any;
+
     /**
      * Fires after the banner shows up
      */
@@ -40,36 +53,33 @@ export class IgxBannerComponent implements IToggleView {
     @Output()
     public onButtonClick = new EventEmitter<BannerEventArgs>();
 
-    /**
-     * Set name of the icon from material design icons
-     */
-    @Input()
-    public icon: string;
-
-    /**
-     * Sets the message to show in the banner
-     */
-    @Input()
-    public message: string;
+    /** @hidden */
+    public get useDefaultTemplate(): boolean {
+        return !this._bannerActionTemplate;
+    }
 
     /**
-     * Sets the description of confirming button
+     * Get the animation settings used by the banner open/close methods
+     * ```typescript
+     * let currentAnimations = banner.animationSettings
+     * ```
      */
     @Input()
-    public confirmButtonText: string;
+    public get animationSettings(): AnimationSettings {
+        return this._animationSettings ? this._animationSettings : this._expansionPanel.animationSettings;
+    }
 
     /**
-     * Set the description of the dismissive button
+     * Set the animation settings used by the banner open/close methods
+     * ```typescript
+     * import { slideInLeft, slideOutRight } from 'igniteui-angular';
+     * ...
+     * banner.animationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
+     * ```
      */
-    @Input()
-    public dismissButtonText: string;
-
-    /** @hidden */
-    @Input()
-    public get useDefaultTemplate(): boolean {
-        return (this.message !== undefined) && (this.dismissButtonText !== undefined || this.confirmButtonText !== undefined);
+    public set animationSettings(settings: AnimationSettings) {
+        this._animationSettings = settings;
     }
-
     /**
      * Gets whether banner is collapsed
      */
@@ -87,57 +97,43 @@ export class IgxBannerComponent implements IToggleView {
     /**
      * Opens the banner
      */
-    public open() {
-        this._bannerEvent = { banner: this, button: null };
-        this._expansionPanel.open();
+    public open(event?: Event) {
+        this._bannerEvent = { banner: this, event};
+        this._expansionPanel.open(event);
     }
 
     /**
      * Closes the banner
      */
-    public close() {
-        this._bannerEvent = { banner: this, button: null };
-        this._expansionPanel.close();
+    public close(event?: Event) {
+        this._bannerEvent = { banner: this, event};
+        this._expansionPanel.close(event);
     }
 
     /**
      * Toggles the banner
      */
-    toggle() {
+    toggle(event?: Event) {
         if (this.collapsed) {
-            this.open();
+            this.open(event);
         } else {
-            this.close();
+            this.close(event);
         }
     }
 
     /** @hidden */
-    public dismiss() {
-        this._bannerEvent = { banner: this, button: 'dismiss' };
-        this.onButtonClick.emit(this._bannerEvent);
-        this.close();
-    }
-
-    /** @hidden */
-    public confirm() {
-        this._bannerEvent = { banner: this, button: 'confirm' };
-        this.onButtonClick.emit(this._bannerEvent);
-        this.close();
-    }
-
-    /** @hidden */
-    public onExpansionPanelOpen(ev) {
+    public onExpansionPanelOpen() {
         this.onOpen.emit(this._bannerEvent);
     }
 
     /** @hidden */
-    public onExpansionPanelClose(ev) {
+    public onExpansionPanelClose() {
         this.onClose.emit(this._bannerEvent);
     }
 }
 @NgModule({
-    declarations: [IgxBannerComponent],
-    exports: [IgxBannerComponent],
+    declarations: [IgxBannerComponent, IgxBannerActionsDirective],
+    exports: [IgxBannerComponent, IgxBannerActionsDirective],
     imports: [IgxExpansionPanelModule, IgxIconModule, BrowserModule, IgxButtonModule, IgxRippleModule]
 })
 export class IgxBannerModule { }

projects/igniteui-angular/src/lib/banner/banner.directives.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+
+// tslint:disable:directive-selector
+@Directive({
+    selector: 'igx-banner-actions'
+})
+export class IgxBannerActionsDirective {
+}

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

@@ -17,13 +17,17 @@ import { IToggleView } from '../core/navigation';
 
 let NEXT_ID = 0;
 
+export interface AnimationSettings {
+    openAnimation: AnimationReferenceMetadata;
+    closeAnimation: AnimationReferenceMetadata;
+}
 @Component({
     selector: 'igx-expansion-panel',
     templateUrl: 'expansion-panel.component.html'
 })
 export class IgxExpansionPanelComponent implements IToggleView {
     @Input()
-    public animationSettings: { openAnimation: AnimationReferenceMetadata, closeAnimation: AnimationReferenceMetadata } = {
+    public animationSettings: AnimationSettings = {
         openAnimation: growVerIn,
         closeAnimation: growVerOut
     };

src/app/banner/banner.sample.html

@@ -1,27 +1,27 @@
 <div class="sample-wrapper">
-    <igx-banner #bannerNoSafeConnection message="Your connections is not private!" icon="lock" [dismissButtonText]="'Reload!!'"
-        [confirmButtonText]="'Advanced'" (onOpen)="onOpen($event)" (onClose)="onClose($event)" (onButtonClick)="onButtonClick($event)">
+    <igx-banner #bannerNoSafeConnection (onOpen)="onOpen($event)" (onClose)="onClose($event)">
+            Your connections is not private! 
+        <igx-icon>lock</igx-icon>
     </igx-banner>
-    <igx-banner #bannerCookies (onOpen)="onOpen($event)" (onClose)="onClose($event)" (onButtonClick)="onButtonClick($event)">
-        <div style="width: 100%;">
-            <h5 style="text-align: center">YOUR COOKIES SETTINGS</h5>
-            <hr>
-            <span>We asks you to accept cookies for performance, social media and advertising purpose. To get more
-                information click on 'more information' button</span>
-            <span>Do you accept these cookies and the processing of personal data involved?</span>
-            <section class="sample-column">
-                <button igxButton="flat" igxRipple (click)="moreInfo()">MORE INFORMATION</button>
-                <button igxButton="flat" igxRipple (click)="accept()">YES, I ACCEPT</button>
-            </section>
-        </div>
-
+    <igx-banner #bannerCookies (onOpen)="onOpen($event)" (onClose)="onClose($event)">
+        <igx-icon>settings</igx-icon>
+        <h5 style="text-align: center">YOUR COOKIES SETTINGS</h5>
+        <hr>
+        <span>We asks you to accept cookies for performance, social media and advertising purpose. To get more
+            information click on 'more information' button</span>
+        <span>Do you accept these cookies and the processing of personal data involved?</span>
+        <igx-banner-actions>
+            <button igxButton="flat" igxRipple (click)="moreInfo($event)">MORE INFORMATION</button>
+            <button igxButton="flat" igxRipple (click)="accept($event)">YES, I ACCEPT</button>
+        </igx-banner-actions>
     </igx-banner>
     <app-page-header title="Banner">
         Allows the user to add banners to the application.
     </app-page-header>
     <div class="sample-content">
         <section class="sample-column">
             <button igxButton="flat" igxRipple (click)="toggle()">Toggle</button>
+            <button igxButton="raised" igxRipple (click)="toggleCustomBanner($event)">Toggle Cookies Banner</button>
         </section>
     </div>
 </div>

src/app/banner/banner.sample.ts

@@ -1,11 +1,11 @@
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { IgxBannerComponent } from 'igniteui-angular';
 
 @Component({
     selector: 'app-banner-sample',
     templateUrl: `banner.sample.html`
 })
-export class BannerSampleComponent implements OnInit {
+export class BannerSampleComponent {
     @ViewChild('bannerNoSafeConnection') bannerNoSafeConnection: IgxBannerComponent;
     @ViewChild('bannerCookies') bannerCookies: IgxBannerComponent;
 
@@ -29,19 +29,15 @@ export class BannerSampleComponent implements OnInit {
         console.log('Button click', ev);
     }
 
-    public accept() {
-        this.bannerCookies.close();
+    public accept(event) {
+        this.bannerCookies.close(event);
     }
 
-    public moreInfo() {
-        this.bannerCookies.close();
+    public moreInfo(event) {
+        this.bannerCookies.close(event);
     }
 
-    ngOnInit(): void {
-        setInterval(() => {
-            if (this.bannerCookies.collapsed) {
-                this.bannerCookies.open();
-            }
-        }, 4000);
+    public toggleCustomBanner(event?) {
+        this.bannerCookies.toggle(event);
     }
 }