feat(igxCollapsible): update sample, add output, add event emit, #307

IgniteUI · Aug 23, 2018 · 895d912 · 895d912
1 parent 47f6085
commit 895d912
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 39 deletions.
diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.html b/projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.html
@@ -1,3 +1,4 @@
     <igx-icon fontSet="material" [name]="collapsible.collapsed? 'expand_more':'expand_less'"></igx-icon>
     <ng-content select="igx-collapsible-title"></ng-content>
     <ng-content select="igx-collapsible-description"></ng-content>
+    <ng-content></ng-content>
diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.ts
@@ -6,20 +6,33 @@ import {
     HostListener,
     Input,
     Renderer2,
-    Host
+    Host,
+    EventEmitter,
+    Output
 } from '@angular/core';
 import { IgxCollapsibleComponent } from './collapsible.component';
 
+export interface ICollapsibleEventArgs {
+    event: Event;
+}
 @Component({
     selector: 'igx-collapsible-header',
     templateUrl: 'collapsible-header.component.html'
 })
 export class IgxCollapsibleHeaderComponent {
      // properties section
 
+     @Input()
+     @HostBinding('attr.tabindex')
+     public tabIndex = 0;
+
+    @Output()
+    public onInterraction = new EventEmitter<ICollapsibleEventArgs>();
+
      @HostBinding('class.igx-collapsible__header')
      public cssClass = 'igx-collapsible__header';
 
+
      @Input()
      @HostBinding('class.igx-collapsible__header--collapsed')
      public get isCollapsed () {
@@ -32,14 +45,19 @@ export class IgxCollapsibleHeaderComponent {
             return !this.collapsible.collapsed;
          }
 
+    @Input()
+    @HostBinding('attr.aria-labelledby')
+    public ariaLabelledBy: string;
+
     constructor(@Host() public collapsible: IgxCollapsibleComponent, public cdr: ChangeDetectorRef,
      public elementRef: ElementRef, private renderer: Renderer2) { }
 
      @HostListener('keydown.Enter', ['$event'])
      @HostListener('keydown.Space', ['$event'])
      @HostListener('click', ['$event'])
-     public onAction(evt: Event) {
-         this.collapsible.toggle();
+     public onAction(evt?: Event) {
+        this.onInterraction.emit({ event: evt });
+         this.collapsible.toggle(evt);
          evt.preventDefault();
      }
 }
diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts
@@ -18,16 +18,23 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { AnimationBuilder, AnimationReferenceMetadata, AnimationMetadataType, AnimationAnimateRefMetadata } from '@angular/animations';
 import { IAnimationParams } from '../animations/main';
 import { slideOutTop, slideInTop } from '../animations/main';
+import { ICollapsibleEventArgs } from './collapsible-header.component';
 
 let NEXT_ID = 0;
-
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'igx-collapsible-header'
+})
+export class IgxCollapsibleHeaderDirective {
+    constructor (public element: ElementRef<any>) {}
+}
 @Directive({
     // tslint:disable-next-line:directive-selector
     selector: 'igx-collapsible-title'
 })
 export class IgxCollapsibleTitleDirective {
 
-    constructor( template: ElementRef<any>) { }
+    constructor(public element: ElementRef<any>) { }
 }
 
 @Directive({
@@ -36,7 +43,7 @@ export class IgxCollapsibleTitleDirective {
 })
 export class IgxCollapsibleDescriptionDirective {
 
-    constructor( template: ElementRef<any>) { }
+    constructor(public element: ElementRef<any>) { }
 }
 
 @Directive({
@@ -45,7 +52,7 @@ export class IgxCollapsibleDescriptionDirective {
 })
 export class IgxCollapsibleBodyDirective {
 
-    constructor( template: ElementRef<any>) { }
+    constructor(public element: ElementRef<any>) { }
 }
 
 @Component({
@@ -109,7 +116,7 @@ export class IgxCollapsibleComponent {
     public headerButtons;
 
     @Output()
-    public onCollapsed = new EventEmitter<any>();
+    public onCollapsed = new EventEmitter<ICollapsibleEventArgs>();
 
     // @Output()
     // public onCollapsing = new EventEmitter<any>();
@@ -118,7 +125,7 @@ export class IgxCollapsibleComponent {
     // public onExpanding = new EventEmitter<any>();
 
     @Output()
-    public onExpanded = new EventEmitter<any>();
+    public onExpanded = new EventEmitter<ICollapsibleEventArgs>();
 
     constructor(
         public cdr: ChangeDetectorRef,
@@ -155,26 +162,26 @@ export class IgxCollapsibleComponent {
         closeAnimationPlayer.play();
     }
 
-    collapse () {
+    collapse (evt?: Event) {
         this.playCloseAnimation(
             () => {
-                this.onCollapsed.emit();
+                this.onCollapsed.emit({event: evt});
                 this.collapsed = true; }
             );
     }
 
-    expand () {
+    expand (evt?: Event) {
         this.collapsed = false;
         this.playOpenAnimation(
-            () => { this.onExpanded.emit(); }
+            () => { this.onExpanded.emit({event: evt}); }
         );
     }
 
-    toggle () {
+    toggle (evt?: Event) {
         if (this.collapsed) {
-            this.expand();
+            this.expand(evt);
         } else  {
-            this.collapse();
+            this.collapse(evt);
         }
     }
 }

diff --git a/src/app/collapsible/collapsible-sample.html b/src/app/collapsible/collapsible-sample.html
@@ -1,25 +1,45 @@
 <div class="sample-wrapper">
-    <h2>WIP</h2>
-    <button igxButton class='igx-button--flat' (click)="resetScore()">Reset score</button>
-    <div class="game-board">
-        <igx-collapsible class="game-board__collapsible">
-            <igx-collapsible-header headerHeight="50px">
-                <igx-collapsible-title>Current Winning Player:</igx-collapsible-title>
-                <igx-collapsible-description>{{ getWinningPlayer }}</igx-collapsible-description>
+    <app-page-header title="Collapsible" description="Collapsible lets you display content with a toggleable details view"></app-page-header>
+    <section>
+        <div class="game-board">
+            <igx-collapsible class="game-board__collapsible">
+                <igx-collapsible-header (onInterraction)="onInterraction($event)">
+                    <igx-collapsible-title>Current Winning Player:</igx-collapsible-title>
+                    <igx-collapsible-description>{{ getWinningPlayer }}</igx-collapsible-description>
+                    <button igxButton class='igx-button--flat' (click)="resetScore($event)">Reset score</button>
+                </igx-collapsible-header>
+                <igx-collapsible-body>
+                    <igx-grid class="game-board__grid" [data]="data">
+                        <igx-column [sortable]="true" [field]="'Game'" [header]="'Game'" [width]="'120px'" [pinned]="true">
+                            <ng-template igxCell let-value>
+                                <span class="game-board__grid__match">{{value}}</span>
+                            </ng-template>
+                        </igx-column>
+                        <igx-column [sortable]="true" [field]="'Player 1'" [header]="'Score: Player 1'">
+                        </igx-column>
+                        <igx-column [sortable]="true" [field]="'Player 2'" [header]="'Score: Player 2'">
+                        </igx-column>
+                    </igx-grid>
+                </igx-collapsible-body>
+            </igx-collapsible>
+        </div>
+    </section>
+    <!-- <section>
+        <igx-collapsible>
+            <igx-collapsible-header>
+                <igx-collapsible-title>
+                    Title
+                </igx-collapsible-title>
+                <igx-collapsible-title>
+                    Simple Description
+                </igx-collapsible-title>
+                <div class="additional-content">
+                    Additional Content
+                </div>
             </igx-collapsible-header>
-            <igx-collapsible-body>
-                <igx-grid class="game-board__grid" [data]="data">
-                    <igx-column [sortable]="true" [field]="'Game'" [header]="'Game'" [width]="'30%'" [pinned]="true">
-                        <ng-template igxCell let-value>
-                            <span class="game-board__grid__match">{{value}}</span>
-                        </ng-template>
-                    </igx-column>
-                    <igx-column [sortable]="true" [field]="'Player 1'" [header]="'Score: Player 1'" [width]="'50%'">
-                    </igx-column>
-                    <igx-column [sortable]="true" [field]="'Player 2'" [header]="'Score: Player 2'" [width]="'50%'">
-                    </igx-column>
-                </igx-grid>
-            </igx-collapsible-body>
+        <igx-collapsible-body>
+            Very detailed and extensive description regarding the simple title and further elaborating on the simple description.
+        </igx-collapsible-body>
         </igx-collapsible>
-    </div>
+    </section> -->
 </div>
diff --git a/src/app/collapsible/collapsible-sample.ts b/src/app/collapsible/collapsible-sample.ts
@@ -47,16 +47,30 @@ export class CollapsibleSampleComponent implements OnInit {
 
     ngOnInit() {
         this.generateScore();
+        this.igxCollapsible.onCollapsed.subscribe((e) => {
+            this.onCollapsing(e);
+        });
+        this.igxCollapsible.onExpanded.subscribe((e) => {
+            this.onExpanding(e);
+        });
     }
 
-    resetScore() {
+    resetScore(event: Event) {
         this.data = [];
+        event.stopPropagation();
         this.generateScore();
     }
 
     constructor() {
     }
 
-    onOpening(event) {
+    onCollapsing(event) {
+        console.log(`I'm collapsing!`, event);
+    }
+    onExpanding(event) {
+        console.log(`I'm expanding!`, event);
+    }
+    onInterraction(event) {
+        console.log(`Header's touched!`, event);
     }
 }