Merge pull request #681 from buildcom/663

resolves #663  applied animation to collapsed component

src/app/sandbox/sandbox.component.ts

@@ -161,7 +161,9 @@ export class SandboxComponent implements OnInit {
     const bossyFormTextareaConfig = new BossyFormTextareaConfig(textareaInput1);
     const bossyPopoverConfig = new BossyPopoverConfig('popover', 'popover1234', true, 'right', 'PoverOver Title', 'Popover Description');
 
-    const bossyCollapseConfig = new BossyCollapseConfig('button1', 'Example1', true);
+    const bossyCollapseConfig = new BossyCollapseConfig([
+        {name: 'button1' , data: 'example1'}
+    ], true);
 
     this.configService.setConfig('alertConfig', alertConfig);
     this.configService.setConfig('calendarConfig', calendarConfig);

src/bossy-ui/bossy-ui.module.ts

@@ -1,5 +1,6 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ReactiveFormsModule} from '@angular/forms';
 import {BossyCalendarComponent} from './components/calendar/calendar.component';
 import {BossyFormElementComponent} from './components/form-element/form-element.component';
@@ -49,7 +50,8 @@ export {BossyPopoverConfig} from './components/popover/popover.config';
 @NgModule({
   imports: [
     BrowserModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    BrowserAnimationsModule
   ],
   declarations: [
     BossyCalendarComponent,

src/bossy-ui/components/collapse/collapse.component.ts

@@ -1,33 +1,47 @@
-import {Component, Input, OnInit, SimpleChanges} from '@angular/core';
-import {BossyCollapseConfig} from './collapse.config';
+import { Component, Input, OnInit, SimpleChanges} from '@angular/core';
+import { BossyCollapseConfig } from './collapse.config';
 import { Console } from '@angular/core/src/console';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { trigger, style, transition, animate, keyframes, query, stagger, state } from '@angular/animations';
 
 @Component({
   selector: 'bossy-collapse',
   templateUrl: './collapse.html',
+  animations: [
+    trigger('collapseAnimation', [
+      state('true', style({ height: '*', fontSize: '14px' })),
+      state('false', style({ height: '0px', fontSize: '0px' })),
+      transition('1 => 0', animate('250ms ease-in')),
+      transition('0 => 1', animate('250ms ease-out'))
+    ])
+  ]
 })
 
+
 export class BossyCollapseComponent implements OnInit {
   @Input() config: BossyCollapseConfig;
-  isShowing = false;
-  show = '';
-  buttonCollapsed = 'collapsed';
+  areItemsExpanded: Array<boolean> = [];
+  buttonsCollapsed: Array<string> = [];
 
   ngOnInit() {
-        this.isShowing = false;
-        this.show = '';
-        this.buttonCollapsed = 'collapsed';
+    this.config.items.forEach(item => {
+      this.areItemsExpanded.push(false);
+      this.buttonsCollapsed.push('collapsed');
+    });
+  }
+
+  isItemExpanded(index): boolean {
+    return this.areItemsExpanded[index];
   }
 
-  onEventClick() {
-      if (this.isShowing) {
-        this.show = '';
-        this.isShowing = false;
-        this.buttonCollapsed = 'collapsed';
-      } else {
-        this.show = 'show';
-        this.isShowing = true;
-        this.buttonCollapsed = '';
-      }
+  onEventClick(index) {
+    if (this.areItemsExpanded[index]) {
+      this.areItemsExpanded[index] = false;
+      this.buttonsCollapsed[index] = 'collapsed';
+    } else {
+      this.areItemsExpanded[index] = true;
+      this.buttonsCollapsed[index] = '';
+    }
   }
 }

src/bossy-ui/components/collapse/collapse.config.ts

@@ -1,7 +1,10 @@
+interface CollapseItems {
+    name: string;
+    data: string;
+}
 
 export class BossyCollapseConfig {
-    constructor(public name: string,
-        public data: string,
+    constructor(public items: Array<CollapseItems>,
         public isAccordionStyle?: boolean) {
     }
 }

src/bossy-ui/components/collapse/collapse.html

@@ -1,33 +1,39 @@
 <div *ngIf="!config?.isAccordionStyle">
-  <p>
-    <button class="btn btn-primary {{buttonCollapsed}}" (click)="onEventClick()" type="button" data-toggle="collapse" data-target="#collapseExample" attr.aria-expanded="{{isShowing}}" aria-controls="collapseExample">
-      {{config.name}}
-    </button>
-  </p>
-
-  <div class="collapse {{show}}" id="collapseExample">
-    <div class="card card-body">
-      {{config.data}}
+  <div *ngFor="let item of config.items; let i = index">
+    <p>
+      <button class="btn btn-primary {{buttonsCollapsed[i]}}" (click)="onEventClick(i)" type="button" data-toggle="collapse" data-target="#collapseExample" attr.aria-expanded="{{isItemExpanded(i)}}" aria-controls="collapseExample">
+        {{item.name}}
+      </button>
+    </p>
+
+    <div class="veritcal-menu" id="collapseExample" [@collapseAnimation]="isItemExpanded(i)">
+      <div class="card vertical-menu" [@collapseAnimation]="isItemExpanded(i)">
+        {{item.data}}
+      </div>
     </div>
   </div>
 </div>
 
 <div *ngIf="config?.isAccordionStyle">
   <div id="accordion">
     <div class="card">
-      <div class="card-header" id="headingOne">
-        <h5 class="mb-0">
-          <button class="btn btn-link {{buttonCollapsed}}" (click)="onEventClick()" data-toggle="collapse" data-target="#collapseOne" attr.aria-expanded="{{isShowing}}" aria-controls="collapseOne">
-            {{config.name}}
-          </button>
-        </h5>
-      </div>
-
-      <div id="collapseOne" class="collapse {{show}}" aria-labelledby="headingOne" data-parent="#accordion">
-        <div class="card-body">
-          {{config.data}}
+      <div *ngFor="let item of config.items; let i = index">
+        <div class="card-header" id="headingOne">
+          <h5 class="mb-0">
+            <button class="btn btn-link {{buttonsCollapsed[i]}}" (click)="onEventClick(i)" data-toggle="collapse" data-target="#collapseOne" attr.aria-expanded="{{isItemExpanded(i)}}" aria-controls="collapseOne">
+              {{item.name}}
+            </button>
+          </h5>
+        </div>
+
+        <div >
+          <div id="collapseOne" class="vertical-menu"  aria-labelledby="headingOne" data-parent="#accordion" [@collapseAnimation]="isItemExpanded(i)">
+            <div class="vertical-menu" [@collapseAnimation]="isItemExpanded(i)">
+              {{item.data}}
+            </div> 
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>