feat(igxCollapsible): Initial POC #307

projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.html

@@ -1,13 +1,5 @@
-<div>
-    <div>
-        igx-collapsible-header
-        <div>
-            igx-collapsible-title
-        </div>
-        <div>
-            igx-collapsible-description
-        </div>
-    </div>
-
-    <div>Body ig-content</div>
+<div tabIndex="1" class="header-content" style="background-color: greenyellow ; height: 30px">
+    <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>
 </div>

projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.ts

@@ -12,20 +12,35 @@ import {
     OnInit,
     AfterContentInit,
     AfterViewInit,
-    Renderer2
+    Renderer2,
+    Host
 } from '@angular/core';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
+import { IgxCollapsibleComponent } from './collapsible.component';
 
 @Component({
     selector: 'igx-collapsible-header',
-    templateUrl: 'igx-collapsible-header.component.html'
+    templateUrl: 'collapsible-header.component.html'
 })
 export class IgxCollapsibleHeaderComponent {
      // properties section
 
-    constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2) { }
+     @Input()
+     @HostBinding('class.igx-collapsible__header--collapsed')
+     public collapsedHeight;
 
-    click (params: any) {
+     @Input()
+     @HostBinding('class.igx-collapsible__header--expanded')
+     public expandedHeight;
 
-    }
+    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();
+         evt.preventDefault();
+     }
 }

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

@@ -1,13 +1,8 @@
 <div>
     <div>
-        igx-collapsible-header
-        <div>
-            igx-collapsible-title
-        </div>
-        <div>
-            igx-collapsible-description
-        </div>
+        <ng-content select="igx-collapsible-header"></ng-content>
+    </div>
+    <div *ngIf="!collapsed" style="border: 1px solid rgb(216, 14, 122); background-color:gainsboro">
+        <ng-content select="igx-collapsible-body"></ng-content>
     </div>
-
-    <div>Body ng-content</div>
 </div>

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

@@ -12,19 +12,49 @@ import {
     OnInit,
     AfterContentInit,
     AfterViewInit,
-    Renderer2
+    Renderer2,
+    Directive,
+    TemplateRef,
+    ContentChild
 } from '@angular/core';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'igx-collapsible-title'
+})
+export class IgxCollapsibleTitleDirective {
+
+    constructor( template: ElementRef<any>) { }
+}
+
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'igx-collapsible-description'
+})
+export class IgxCollapsibleDescriptionDirective {
+
+    constructor( template: ElementRef<any>) { }
+}
+
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'igx-collapsible-body'
+})
+export class IgxCollapsibleBodyDirective {
+
+    constructor( template: ElementRef<any>) { }
+}
+
 @Component({
     selector: 'igx-collapsible',
     templateUrl: 'collapsible.component.html'
 })
 export class IgxCollapsibleComponent {
-     //properties section
+     // properties section
 
-    @ViewChild('', { read: ElementRef })
-    public textArea: ElementRef;
+    @ContentChild(IgxCollapsibleBodyDirective, { read: IgxCollapsibleBodyDirective })
+    public textArea: IgxCollapsibleBodyDirective;
 
     @ViewChild('toggleBtn', { read: ElementRef })
     public toggleBtn: ElementRef;
@@ -44,33 +74,33 @@ export class IgxCollapsibleComponent {
     @Output()
     public onCollapsed = new EventEmitter<any>();
 
-    @Output()
-    public onCollapsing = new EventEmitter<any>();
+    // @Output()
+    // public onCollapsing = new EventEmitter<any>();
 
-    @Output()
-    public onExpanding = new EventEmitter<any>();
+    // @Output()
+    // public onExpanding = new EventEmitter<any>();
 
     @Output()
     public onExpanded = new EventEmitter<any>();
 
     constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2) { }
 
-    collapse (params: any) {
-
+    collapse () {
+        this.onCollapsed.emit();
+        this.collapsed = true;
     }
 
-    expand (params: any) {
-
+    expand () {
+        this.onExpanded.emit();
+        this.collapsed = false;
     }
 
-    toggle (params: any) {
-
+    toggle () {
+        if (this.collapsed) {
+            this.expand();
+        } else  {
+            this.collapse();
+        }
     }
-
-
-
-
-
-
-
 }
+

projects/igniteui-angular/src/lib/collapsible/collapsible.module.ts

@@ -1,20 +1,31 @@
-import { IgxCollapsibleComponent } from './collapsible.component';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 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 { IgxCollapsibleHeaderComponent } from './collapsible-header.component';
 
 
 @NgModule({
   declarations: [
-    IgxCollapsibleComponent
+    IgxCollapsibleComponent,
+    IgxCollapsibleHeaderComponent,
+    IgxCollapsibleDescriptionDirective,
+    IgxCollapsibleTitleDirective,
+    IgxCollapsibleBodyDirective
+
   ],
   entryComponents: [
   ],
   exports: [
-    IgxCollapsibleComponent
+    IgxCollapsibleComponent,
+    IgxCollapsibleHeaderComponent,
+    IgxCollapsibleDescriptionDirective,
+    IgxCollapsibleTitleDirective,
+    IgxCollapsibleBodyDirective
   ],
   imports: [
     CommonModule,

src/app/app.component.ts

@@ -60,6 +60,11 @@ export class AppComponent implements OnInit {
             icon: 'arrow_drop_down_circle',
             name: 'Combo'
         },
+        {
+            link: '/collapsible',
+            icon: 'expand_more',
+            name: 'Collapsible'
+        },
         {
             link: '/datePicker',
             icon: 'date_range',

src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { CollapsibleSampleComponent } from './collapsible/collapsible-sample';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
@@ -62,6 +63,9 @@ 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';
+
+
 
 const components = [
     AppComponent,
@@ -71,6 +75,7 @@ const components = [
     CalendarSampleComponent,
     CardSampleComponent,
     CarouselSampleComponent,
+    CollapsibleSampleComponent,
     ChipsSampleComponent,
     DialogSampleComponent,
     DatePickerSampleComponent,
@@ -131,7 +136,8 @@ const components = [
         IgxColumnHidingModule,
         IgxDragDropModule,
         SharedModule,
-        routing
+        routing,
+        IgxCollapsibleModule
     ],
     providers: [
         LocalService,

src/app/collapsible/collapsible-sample.html

@@ -1,4 +1,13 @@
 <div class="sample-wrapper">
     <h2>WIP</h2>
-    <igxCollapsible></igxCollapsible>
+    <igx-collapsible>
+        <igx-collapsible-header headerHeight="50px">
+        <igx-collapsible-title>collapsible-title </igx-collapsible-title>
+            <igx-collapsible-description>collapsible-description</igx-collapsible-description>
+        </igx-collapsible-header>
+        <igx-collapsible-body>
+            Body text
+        </igx-collapsible-body>
+    </igx-collapsible>
+
 </div>

src/app/collapsible/collapsible-sample.ts

@@ -1,7 +1,7 @@
 import { IgxCollapsibleComponent } from './../../../projects/igniteui-angular/src/lib/collapsible/collapsible.component';
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import {
-    //IgxCollapsibleComponent
+    // IgxCollapsibleComponent
 } from 'igniteui-angular';
 
 @Component({

src/app/routing.ts

@@ -6,6 +6,7 @@ import { CalendarSampleComponent } from './calendar/calendar.sample';
 import { CardSampleComponent } from './card/card.sample';
 import { CarouselSampleComponent } from './carousel/carousel.sample';
 import { ChipsSampleComponent} from './chips/chips.sample';
+import { CollapsibleSampleComponent } from './collapsible/collapsible-sample';
 import { DatePickerSampleComponent } from './date-picker/date-picker.sample';
 import { DialogSampleComponent } from './dialog/dialog.sample';
 import { DragDropSampleComponent } from './drag-drop/drag-drop.sample';
@@ -82,6 +83,10 @@ const appRoutes = [
         path: 'combo',
         component: ComboSampleComponent
     },
+    {
+        path: 'collapsible',
+        component: CollapsibleSampleComponent
+    },
     {
         path: 'chip',
         component: ChipsSampleComponent