feat(igxCollapsible): add separate export, add button template, #307

IgniteUI · Aug 24, 2018 · d09b219 · d09b219
1 parent 895d912
commit d09b219
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 93 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,4 +1,13 @@
-    <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>
+<ng-template #iconContainer>
+    <ng-content *ngIf="iconTemplate" select="igx-collapsible-button"></ng-content>
+    <igx-icon *ngIf="!iconTemplate" fontSet="material" [name]="collapsible.collapsed? 'expand_more':'expand_less'"></igx-icon>
+</ng-template>
+<ng-container *ngIf="buttonPosition === 'left'">
+    <ng-container *ngTemplateOutlet="iconContainer"></ng-container>
+</ng-container>
+<ng-content select="igx-collapsible-title"></ng-content>
+<ng-content select="igx-collapsible-description"></ng-content>
+<ng-content></ng-content>
+<ng-container *ngIf="buttonPosition === 'right'">
+    <ng-container *ngTemplateOutlet="iconContainer"></ng-container>
+</ng-container>
diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.ts
@@ -8,23 +8,47 @@ import {
     Renderer2,
     Host,
     EventEmitter,
-    Output
+    Output,
+    ContentChild,
+    TemplateRef
 } from '@angular/core';
 import { IgxCollapsibleComponent } from './collapsible.component';
+import { IgxCollapsibleButtonDirective } from './collapsible.directives';
 
 export interface ICollapsibleEventArgs {
     event: Event;
 }
+
+export enum BUTTON_POSITION {
+    LEFT = 'left',
+    NONE = 'none',
+    RIGHT = 'right'
+}
+
 @Component({
     selector: 'igx-collapsible-header',
     templateUrl: 'collapsible-header.component.html'
 })
 export class IgxCollapsibleHeaderComponent {
      // properties section
 
-     @Input()
-     @HostBinding('attr.tabindex')
-     public tabIndex = 0;
+     private _iconTemplate = false;
+
+    @ContentChild(IgxCollapsibleButtonDirective)
+    public set iconTemplate(val: any) {
+        this._iconTemplate = <boolean>val;
+    }
+
+    public get iconTemplate(): any {
+        return this._iconTemplate;
+    }
+
+    @Input()
+    public buttonPosition: BUTTON_POSITION = BUTTON_POSITION.LEFT;
+
+    @Input()
+    @HostBinding('attr.tabindex')
+    public tabIndex = 0;
 
     @Output()
     public onInterraction = new EventEmitter<ICollapsibleEventArgs>();

diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.component.html b/projects/igniteui-angular/src/lib/collapsible/collapsible.component.html
@@ -1,7 +1,5 @@
 
-<div>
-    <ng-content select="igx-collapsible-header"></ng-content>
-</div>
+<ng-content select="igx-collapsible-header"></ng-content>
 <div #collapseBody style="border: 1px solid rgb(58, 53, 56); background-color:gainsboro">
     <ng-content *ngIf="!collapsed" select="igx-collapsible-body"></ng-content>
 </div>

diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts
@@ -19,41 +19,9 @@ import { AnimationBuilder, AnimationReferenceMetadata, AnimationMetadataType, An
 import { IAnimationParams } from '../animations/main';
 import { slideOutTop, slideInTop } from '../animations/main';
 import { ICollapsibleEventArgs } from './collapsible-header.component';
+import { IgxCollapsibleBodyDirective } from './collapsible.directives';
 
 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(public element: ElementRef<any>) { }
-}
-
-@Directive({
-    // tslint:disable-next-line:directive-selector
-    selector: 'igx-collapsible-description'
-})
-export class IgxCollapsibleDescriptionDirective {
-
-    constructor(public element: ElementRef<any>) { }
-}
-
-@Directive({
-    // tslint:disable-next-line:directive-selector
-    selector: 'igx-collapsible-body'
-})
-export class IgxCollapsibleBodyDirective {
-
-    constructor(public element: ElementRef<any>) { }
-}
 
 @Component({
     selector: 'igx-collapsible',
@@ -85,7 +53,7 @@ export class IgxCollapsibleComponent {
     @HostBinding('class.igx-collapsible')
     public cssClass = 'igx-collapsible';
 
-    @ContentChild(IgxCollapsibleBodyDirective, { read: IgxCollapsibleBodyDirective })
+    @ContentChild(IgxCollapsibleBodyDirective, { read: ElementRef })
     public textArea: IgxCollapsibleBodyDirective;
 
     @ViewChild('toggleBtn', { read: ElementRef })
@@ -105,7 +73,7 @@ export class IgxCollapsibleComponent {
     public collapsed = true;
 
     @HostBinding('attr.aria-expanded')
-    private get HostState () {
+    public get hostState () {
         return !this.collapsed;
     }
 

diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.directives.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible.directives.ts
@@ -0,0 +1,35 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'igx-collapsible-header'
+})
+export class IgxCollapsibleHeaderDirective {
+}
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'igx-collapsible-title'
+})
+export class IgxCollapsibleTitleDirective {
+}
+
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'igx-collapsible-description'
+})
+export class IgxCollapsibleDescriptionDirective {
+}
+
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'igx-collapsible-body'
+})
+export class IgxCollapsibleBodyDirective {
+}
+
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'igx-collapsible-button'
+})
+export class IgxCollapsibleButtonDirective {
+}
diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.module.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible.module.ts
@@ -4,19 +4,22 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxAvatarModule } from '../avatar/avatar.component';
 import { IgxIconModule } from '../icon';
-import { IgxCollapsibleComponent, IgxCollapsibleDescriptionDirective, IgxCollapsibleTitleDirective,
-     IgxCollapsibleBodyDirective } from './collapsible.component';
+import { IgxCollapsibleComponent } from './collapsible.component';
 import { IgxCollapsibleHeaderComponent } from './collapsible-header.component';
-
+import { IgxCollapsibleDescriptionDirective, IgxCollapsibleTitleDirective,
+  IgxCollapsibleBodyDirective,
+  IgxCollapsibleHeaderDirective,
+  IgxCollapsibleButtonDirective } from './collapsible.directives';
 
 @NgModule({
   declarations: [
     IgxCollapsibleComponent,
     IgxCollapsibleHeaderComponent,
     IgxCollapsibleDescriptionDirective,
     IgxCollapsibleTitleDirective,
-    IgxCollapsibleBodyDirective
-
+    IgxCollapsibleBodyDirective,
+    IgxCollapsibleButtonDirective,
+    IgxCollapsibleHeaderDirective
   ],
   entryComponents: [
   ],
@@ -25,7 +28,9 @@ import { IgxCollapsibleHeaderComponent } from './collapsible-header.component';
     IgxCollapsibleHeaderComponent,
     IgxCollapsibleDescriptionDirective,
     IgxCollapsibleTitleDirective,
-    IgxCollapsibleBodyDirective
+    IgxCollapsibleBodyDirective,
+    IgxCollapsibleButtonDirective,
+    IgxCollapsibleHeaderDirective
   ],
   imports: [
     CommonModule,
@@ -36,9 +41,4 @@ import { IgxCollapsibleHeaderComponent } from './collapsible-header.component';
   ]
 })
 export class IgxCollapsibleModule {
-    public static forRoot() {
-        return {
-            ngModule: IgxCollapsibleModule
-        };
-    }
 }
diff --git a/projects/igniteui-angular/src/lib/collapsible/index.ts b/projects/igniteui-angular/src/lib/collapsible/index.ts
@@ -0,0 +1,4 @@
+
+export * from './collapsible-header.component';
+export * from './collapsible.component';
+export * from './collapsible.module';
diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts
@@ -64,6 +64,7 @@ export * from './lib/grid/index';
 export * from './lib/icon/index';
 export * from './lib/input-group/index';
 export * from './lib/list/index';
+export * from './lib/collapsible/index';
 export * from './lib/navbar/navbar.component';
 export * from './lib/navigation-drawer/index';
 export * from './lib/progressbar/progressbar.component';

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -4,7 +4,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
-import { IgxIconModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService } from 'igniteui-angular';
+import { IgxIconModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService,
+    IgxOverlayService, IgxCollapsibleModule } from 'igniteui-angular';
 import { IgxColumnHidingModule } from 'igniteui-angular';
 import { SharedModule } from './shared/shared.module';
 import { IgxDragDropModule } from '../../projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive';
@@ -63,7 +64,6 @@ import { DropDownSampleComponent } from './drop-down/drop-down.sample';
 import { ComboSampleComponent } from './combo/combo.sample';
 import { OverlaySampleComponent } from './overlay/overlay.sample';
 import { RadioSampleComponent } from './radio/radio.sample';
-import { IgxCollapsibleModule } from 'projects/igniteui-angular/src/lib/collapsible/collapsible.module';
 
 
 

diff --git a/src/app/collapsible/collapsible-sample.html b/src/app/collapsible/collapsible-sample.html
@@ -2,11 +2,17 @@
     <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
+            (onCollapsed)="handleCollapsed($event)"
+            (onExpanded)="handleExpanded($event)" #collapsibleComponent class="game-board__collapsible">
+                <igx-collapsible-header [buttonPosition]="'right'" (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-button *ngIf="templatedIcon">
+                        <!-- <igx-icon fontSet="material" [name]="collapsed() ? 'arrow_drop_down':'arrow_drop_up'"></igx-icon> -->
+                        {{collapsed() ? 'Expand':'Collapse'}}
+                    </igx-collapsible-button>
                 </igx-collapsible-header>
                 <igx-collapsible-body>
                     <igx-grid class="game-board__grid" [data]="data">
@@ -23,23 +29,6 @@
                 </igx-collapsible-body>
             </igx-collapsible>
         </div>
+        <button igxButton class="igx-button--raised" (click)="templateIcon()">{{ templatedIcon ? 'Disabled' : 'Enable'}} icon template</button>
     </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>
-            Very detailed and extensive description regarding the simple title and further elaborating on the simple description.
-        </igx-collapsible-body>
-        </igx-collapsible>
-    </section> -->
 </div>
diff --git a/src/app/collapsible/collapsible-sample.ts b/src/app/collapsible/collapsible-sample.ts
@@ -1,8 +1,5 @@
-import { IgxCollapsibleComponent } from './../../../projects/igniteui-angular/src/lib/collapsible/collapsible.component';
+import { IgxCollapsibleComponent } from 'igniteui-angular';
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import {
-    // IgxCollapsibleComponent
-} from 'igniteui-angular';
 
 @Component({
     // tslint:disable-next-line:component-selector
@@ -11,16 +8,18 @@ import {
     styleUrls: ['collapsible-sample.scss']
 })
 export class CollapsibleSampleComponent implements OnInit {
-    @ViewChild(IgxCollapsibleComponent) public igxCollapsible: IgxCollapsibleComponent;
+    @ViewChild(IgxCollapsibleComponent)
+    public igxCollapsible: IgxCollapsibleComponent;
     @ViewChild('button') public button: ElementRef;
 
+    public templatedIcon = false;
     public score: number;
     public data = [];
     public winningPlayer;
     private rounds = 5;
     public get currentScore(): { 'Player 1': number,
     'Player 2': number} {
-        return this.data.reduce((a, b) => {
+        return this.data.length === 0 ? [] : this.data.reduce((a, b) => {
             return {
                 'Player 1': a['Player 1'] + b['Player 1'],
                 'Player 2': a['Player 2'] + b['Player 2'],
@@ -47,12 +46,6 @@ 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(event: Event) {
@@ -61,16 +54,24 @@ export class CollapsibleSampleComponent implements OnInit {
         this.generateScore();
     }
 
+    collapsed() {
+        return this.igxCollapsible && this.igxCollapsible.collapsed;
+    }
+
     constructor() {
     }
 
-    onCollapsing(event) {
+    handleCollapsed(event) {
         console.log(`I'm collapsing!`, event);
     }
-    onExpanding(event) {
+    handleExpanded(event) {
         console.log(`I'm expanding!`, event);
     }
     onInterraction(event) {
         console.log(`Header's touched!`, event);
     }
+
+    templateIcon() {
+        this.templatedIcon = !this.templatedIcon;
+    }
 }