From fc3229e72ce57d8dbeb108f6940bf8736a372a52 Mon Sep 17 00:00:00 2001
From: Preston Lamb <preston.j.lamb@gmail.com>
Date: Tue, 13 Aug 2019 22:05:13 -0600
Subject: [PATCH 1/6] feat(Accordion): added the accordion module and component

---
 .../src/lib/accordion/accordion.module.ts     | 10 ++++++++
 .../accordion/accordion.component.css         |  0
 .../accordion/accordion.component.html        |  3 +++
 .../accordion/accordion.component.spec.ts     | 24 +++++++++++++++++++
 .../accordion/accordion.component.ts          | 12 ++++++++++
 5 files changed, 49 insertions(+)
 create mode 100644 projects/ngx-plug-n-play-lib/src/lib/accordion/accordion.module.ts
 create mode 100644 projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css
 create mode 100644 projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html
 create mode 100644 projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
 create mode 100644 projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts

diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion.module.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion.module.ts
new file mode 100644
index 0000000..8bc2458
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AccordionComponent } from './accordion/accordion.component';
+
+@NgModule({
+	declarations: [AccordionComponent],
+	exports: [AccordionComponent],
+	imports: [CommonModule],
+})
+export class AccordionModule {}
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html
new file mode 100644
index 0000000..e9af91d
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html
@@ -0,0 +1,3 @@
+<p>
+  accordion works!
+</p>
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
new file mode 100644
index 0000000..cee3b6f
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionComponent } from './accordion.component';
+
+describe('AccordionComponent', () => {
+	let component: AccordionComponent;
+	let fixture: ComponentFixture<AccordionComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [AccordionComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(AccordionComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
new file mode 100644
index 0000000..90a799f
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'pnp-accordion',
+	templateUrl: './accordion.component.html',
+	styleUrls: ['./accordion.component.css'],
+})
+export class AccordionComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit() {}
+}

From 01b3531d91c841d5b6fa743e610952f4513606dd Mon Sep 17 00:00:00 2001
From: Preston Lamb <preston.j.lamb@gmail.com>
Date: Tue, 13 Aug 2019 22:35:59 -0600
Subject: [PATCH 2/6] feat(Accordion): added the accordion demo, and the actual
 functionality for the accordion

---
 angular.json                                  |  2 +-
 projects/ngx-plug-n-play-lib/package.json     |  3 +-
 .../accordion/accordion.component.css         |  3 ++
 .../accordion/accordion.component.html        |  9 +++--
 .../accordion/accordion.component.spec.ts     | 14 ++------
 .../accordion/accordion.component.ts          | 33 +++++++++++++++++--
 .../shared/animations/collapse-animation.ts   | 28 ++++++++++++++++
 .../ngx-plug-n-play-lib/src/public-api.ts     |  2 ++
 .../accordion-demo.component.html             | 19 +++++++++++
 .../accordion-demo.component.scss             | 11 +++++++
 .../accordion-demo.component.spec.ts          | 24 ++++++++++++++
 .../accordion-demo.component.ts               | 12 +++++++
 src/app/app-routing.module.ts                 |  2 ++
 src/app/app.module.ts                         | 27 +++++++++++++--
 src/app/main-nav/main-nav.component.html      |  3 ++
 15 files changed, 169 insertions(+), 23 deletions(-)
 create mode 100644 projects/ngx-plug-n-play-lib/src/lib/shared/animations/collapse-animation.ts
 create mode 100644 src/app/accordion-demo/accordion-demo.component.html
 create mode 100644 src/app/accordion-demo/accordion-demo.component.scss
 create mode 100644 src/app/accordion-demo/accordion-demo.component.spec.ts
 create mode 100644 src/app/accordion-demo/accordion-demo.component.ts

diff --git a/angular.json b/angular.json
index 7dba8d5..8632937 100644
--- a/angular.json
+++ b/angular.json
@@ -10,7 +10,7 @@
 			"prefix": "pnp",
 			"schematics": {
 				"@schematics/angular:component": {
-					"style": "sass"
+					"style": "scss"
 				}
 			},
 			"architect": {
diff --git a/projects/ngx-plug-n-play-lib/package.json b/projects/ngx-plug-n-play-lib/package.json
index 254c0df..7f6e352 100644
--- a/projects/ngx-plug-n-play-lib/package.json
+++ b/projects/ngx-plug-n-play-lib/package.json
@@ -3,7 +3,8 @@
 	"version": "1.0.6",
 	"peerDependencies": {
 		"@angular/common": ">7.2.0",
-		"@angular/core": ">7.2.0"
+		"@angular/core": ">7.2.0",
+		"@angular/animations": ">7.2.0"
 	},
 	"author": {
 		"email": "preston.j.lamb@gmail.com",
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css
index e69de29..6b6cf6d 100644
--- a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css
@@ -0,0 +1,3 @@
+.accordion-body-container {
+	overflow: hidden;
+}
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html
index e9af91d..2533e3b 100644
--- a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html
@@ -1,3 +1,6 @@
-<p>
-  accordion works!
-</p>
+<div class="accordion-header-container" [class.accordion-open]="!isCollapsed">
+	<ng-content select="[accordion-header]"></ng-content>
+</div>
+<div class="accordion-body-container" [@collapse]="isCollapsed ? 'collapsed' : 'open'">
+	<ng-content select="[accordion-body]"></ng-content>
+</div>
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
index cee3b6f..451c77e 100644
--- a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
@@ -1,21 +1,11 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { AccordionComponent } from './accordion.component';
 
 describe('AccordionComponent', () => {
 	let component: AccordionComponent;
-	let fixture: ComponentFixture<AccordionComponent>;
-
-	beforeEach(async(() => {
-		TestBed.configureTestingModule({
-			declarations: [AccordionComponent],
-		}).compileComponents();
-	}));
+	let mockElRef;
 
 	beforeEach(() => {
-		fixture = TestBed.createComponent(AccordionComponent);
-		component = fixture.componentInstance;
-		fixture.detectChanges();
+		component = new AccordionComponent(mockElRef);
 	});
 
 	it('should create', () => {
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
index 90a799f..d21b8a1 100644
--- a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
@@ -1,12 +1,39 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input, ElementRef } from '@angular/core';
+import { trigger } from '@angular/animations';
+import { collapseAnimation } from '../../shared/animations/collapse-animation';
 
 @Component({
 	selector: 'pnp-accordion',
 	templateUrl: './accordion.component.html',
 	styleUrls: ['./accordion.component.css'],
+	animations: [trigger('collapse', collapseAnimation())],
 })
 export class AccordionComponent implements OnInit {
-	constructor() {}
+	@Output() isCollapsedUpdated: EventEmitter<boolean> = new EventEmitter<boolean>();
+	@Input() triggerSelector: string = '.accordion-trigger';
+	public isCollapsed: boolean = true;
+	private trigger;
 
-	ngOnInit() {}
+	constructor(private _elRef: ElementRef) {}
+
+	ngOnInit() {
+		this.updateCollapsedStatus();
+		this.trigger = this._elRef.nativeElement.querySelector(this.triggerSelector)
+			? this._elRef.nativeElement.querySelector(this.triggerSelector)
+			: this._elRef.nativeElement.querySelector('.accordion-header-container');
+		this.trigger.addEventListener('click', this.toggleAccordionVisibility.bind(this));
+	}
+
+	ngOnDestroy() {
+		this.trigger.removeEventListener('click', this.toggleAccordionVisibility, { passive: true });
+	}
+
+	updateCollapsedStatus() {
+		this.isCollapsedUpdated.emit(this.isCollapsed);
+	}
+
+	toggleAccordionVisibility() {
+		this.isCollapsed = !this.isCollapsed;
+		this.updateCollapsedStatus();
+	}
 }
diff --git a/projects/ngx-plug-n-play-lib/src/lib/shared/animations/collapse-animation.ts b/projects/ngx-plug-n-play-lib/src/lib/shared/animations/collapse-animation.ts
new file mode 100644
index 0000000..f56de9f
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/shared/animations/collapse-animation.ts
@@ -0,0 +1,28 @@
+import { state, style, animate, transition } from '@angular/animations';
+
+export function collapseAnimation(
+	slideDownDuration: string = '500ms',
+	slideUpDuration: string = '500ms',
+	startingOpacity: string = '1',
+	endingOpacity: string = '1',
+) {
+	return [
+		state(
+			'collapsed',
+			style({
+				height: '0',
+				overflow: 'hidden',
+				opacity: startingOpacity,
+			}),
+		),
+		state(
+			'open',
+			style({
+				overflow: 'hidden',
+				opacity: endingOpacity,
+			}),
+		),
+		transition('collapsed=>open', animate(slideDownDuration)),
+		transition('open=>collapsed', animate(slideUpDuration)),
+	];
+}
diff --git a/projects/ngx-plug-n-play-lib/src/public-api.ts b/projects/ngx-plug-n-play-lib/src/public-api.ts
index bf283ec..967e8e7 100644
--- a/projects/ngx-plug-n-play-lib/src/public-api.ts
+++ b/projects/ngx-plug-n-play-lib/src/public-api.ts
@@ -6,3 +6,5 @@ export * from './lib/typeahead/typeahead.module';
 
 export * from './lib/alert-toaster/alert-toaster.service';
 export * from './lib/alert-toaster/alert-toaster.module';
+
+export * from './lib/accordion/accordion.module';
diff --git a/src/app/accordion-demo/accordion-demo.component.html b/src/app/accordion-demo/accordion-demo.component.html
new file mode 100644
index 0000000..39423df
--- /dev/null
+++ b/src/app/accordion-demo/accordion-demo.component.html
@@ -0,0 +1,19 @@
+<pnp-accordion>
+	<ng-container accordion-header>
+		<p class="accordion-trigger">Trigger Accordion</p>
+	</ng-container>
+	<div accordion-body>
+		<p>
+			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda nulla itaque vel deserunt quos.
+			Expedita.
+		</p>
+		<p>
+			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda nulla itaque vel deserunt quos.
+			Expedita.
+		</p>
+		<p>
+			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda nulla itaque vel deserunt quos.
+			Expedita.
+		</p>
+	</div>
+</pnp-accordion>
diff --git a/src/app/accordion-demo/accordion-demo.component.scss b/src/app/accordion-demo/accordion-demo.component.scss
new file mode 100644
index 0000000..8904aaf
--- /dev/null
+++ b/src/app/accordion-demo/accordion-demo.component.scss
@@ -0,0 +1,11 @@
+.accordion-trigger {
+	border: 1px solid black;
+	padding: 5px;
+	cursor: pointer;
+	margin-bottom: 0;
+}
+
+div[accordion-body] {
+	border: 1px solid red;
+	padding: 25px;
+}
diff --git a/src/app/accordion-demo/accordion-demo.component.spec.ts b/src/app/accordion-demo/accordion-demo.component.spec.ts
new file mode 100644
index 0000000..1c2f4fc
--- /dev/null
+++ b/src/app/accordion-demo/accordion-demo.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionDemoComponent } from './accordion-demo.component';
+
+describe('AccordionDemoComponent', () => {
+	let component: AccordionDemoComponent;
+	let fixture: ComponentFixture<AccordionDemoComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [AccordionDemoComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(AccordionDemoComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/accordion-demo/accordion-demo.component.ts b/src/app/accordion-demo/accordion-demo.component.ts
new file mode 100644
index 0000000..18da15b
--- /dev/null
+++ b/src/app/accordion-demo/accordion-demo.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'pnp-accordion-demo',
+	templateUrl: './accordion-demo.component.html',
+	styleUrls: ['./accordion-demo.component.scss'],
+})
+export class AccordionDemoComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit() {}
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b434eb7..bff555d 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 import { AlertsToasterDemoComponent } from './alerts-toaster-demo/alerts-toaster-demo.component';
 import { HomeComponent } from './home/home.component';
 import { TypeaheadDemoComponent } from './typeahead-demo/typeahead-demo.component';
+import { AccordionDemoComponent } from './accordion-demo/accordion-demo.component';
 
 const routes: Routes = [
 	{ path: '', component: HomeComponent },
 	{ path: 'typeahead-demo', component: TypeaheadDemoComponent },
 	{ path: 'alerts-toaster-demo', component: AlertsToasterDemoComponent },
+	{ path: 'accordion-demo', component: AccordionDemoComponent },
 	{ path: '**', redirectTo: '', pathMatch: 'full' },
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1e27eaa..82e7ea4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,17 +1,38 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import { AlertToasterModule, TypeaheadModule } from '../../projects/ngx-plug-n-play-lib/src/public-api';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+	AlertToasterModule,
+	TypeaheadModule,
+	AccordionModule,
+} from '../../projects/ngx-plug-n-play-lib/src/public-api';
 import { AlertsToasterDemoComponent } from './alerts-toaster-demo/alerts-toaster-demo.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 import { MainNavComponent } from './main-nav/main-nav.component';
 import { TypeaheadDemoComponent } from './typeahead-demo/typeahead-demo.component';
+import { AccordionDemoComponent } from './accordion-demo/accordion-demo.component';
 
 @NgModule({
-	imports: [BrowserModule, FormsModule, AppRoutingModule, TypeaheadModule, AlertToasterModule],
-	declarations: [AppComponent, MainNavComponent, HomeComponent, TypeaheadDemoComponent, AlertsToasterDemoComponent],
+	imports: [
+		BrowserModule,
+		BrowserAnimationsModule,
+		FormsModule,
+		AppRoutingModule,
+		TypeaheadModule,
+		AlertToasterModule,
+		AccordionModule,
+	],
+	declarations: [
+		AppComponent,
+		MainNavComponent,
+		HomeComponent,
+		TypeaheadDemoComponent,
+		AlertsToasterDemoComponent,
+		AccordionDemoComponent,
+	],
 	bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/main-nav/main-nav.component.html b/src/app/main-nav/main-nav.component.html
index 50bfd90..fc928af 100644
--- a/src/app/main-nav/main-nav.component.html
+++ b/src/app/main-nav/main-nav.component.html
@@ -23,6 +23,9 @@
 			<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
 				<a class="nav-link" [routerLink]="['/alerts-toaster-demo']">Alerts Toaster Demo</a>
 			</li>
+			<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+				<a class="nav-link" [routerLink]="['/accordion-demo']">Accordion Demo</a>
+			</li>
 		</ul>
 	</div>
 </nav>

From 83a5196bdd0c12b939ffa377fcc0d9849abc0cde Mon Sep 17 00:00:00 2001
From: Preston Lamb <preston.j.lamb@gmail.com>
Date: Mon, 19 Aug 2019 16:42:11 -0600
Subject: [PATCH 3/6] adding tests for the accordion component

---
 .../accordion/accordion.component.spec.ts     | 58 ++++++++++++++++++-
 .../accordion/accordion.component.ts          |  2 +-
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
index 451c77e..984633f 100644
--- a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
@@ -1,14 +1,68 @@
 import { AccordionComponent } from './accordion.component';
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@Component({
+	selector: 'app-test-host',
+	template: `
+		<pnp-accordion>
+			<ng-container accordion-header>
+				<p class="accordion-trigger">Trigger Accordion</p>
+			</ng-container>
+			<div accordion-body>
+				<p>
+					Lorem, ipsum dolor sit.
+				</p>
+			</div>
+		</pnp-accordion>
+	`,
+})
+class TestHostComponent {
+	@ViewChild(AccordionComponent) accordion: AccordionComponent;
+}
 
 describe('AccordionComponent', () => {
+	let testHostComponent: TestHostComponent;
 	let component: AccordionComponent;
-	let mockElRef;
+	let fixture: ComponentFixture<TestHostComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			imports: [BrowserAnimationsModule],
+			declarations: [TestHostComponent, AccordionComponent],
+		}).compileComponents();
+	}));
 
 	beforeEach(() => {
-		component = new AccordionComponent(mockElRef);
+		fixture = TestBed.createComponent(TestHostComponent);
+		testHostComponent = fixture.componentInstance;
+		component = testHostComponent.accordion;
+		fixture.detectChanges();
 	});
 
 	it('should create', () => {
 		expect(component).toBeTruthy();
 	});
+
+	it('should have the .accordion-trigger element as the trigger', () => {
+		const classList: DOMTokenList = component.trigger.classList;
+
+		expect(classList.contains('accordion-trigger')).toBeTruthy();
+	});
+
+	it('should call the function that will emit the new accordion value', () => {
+		spyOn(component, 'updateCollapsedStatus');
+		component.toggleAccordionVisibility();
+
+		expect(component.updateCollapsedStatus).toHaveBeenCalled();
+	});
+
+	it('should emit the new accordion value', () => {
+		spyOn(component.isCollapsedUpdated, 'emit');
+		component.updateCollapsedStatus();
+
+		expect(component.isCollapsedUpdated.emit).toHaveBeenCalled();
+	});
 });
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
index d21b8a1..b9a5cb3 100644
--- a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
@@ -12,7 +12,7 @@ export class AccordionComponent implements OnInit {
 	@Output() isCollapsedUpdated: EventEmitter<boolean> = new EventEmitter<boolean>();
 	@Input() triggerSelector: string = '.accordion-trigger';
 	public isCollapsed: boolean = true;
-	private trigger;
+	public trigger;
 
 	constructor(private _elRef: ElementRef) {}
 

From f8b6526da02be43be9ca6150abaf3fe5d15e8d21 Mon Sep 17 00:00:00 2001
From: Preston Lamb <preston.j.lamb@gmail.com>
Date: Mon, 19 Aug 2019 16:44:52 -0600
Subject: [PATCH 4/6] npm audit fix

---
 package-lock.json | 124 +++++++++++++++++++++-------------------------
 1 file changed, 56 insertions(+), 68 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a0bb4b5..0a34ff1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "ngx-plug-n-play",
-	"version": "1.0.2",
+	"version": "1.0.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -1717,11 +1717,6 @@
 				"multicast-dns-service-types": "^1.1.0"
 			}
 		},
-		"bootstrap": {
-			"version": "4.3.1",
-			"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
-			"integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
-		},
 		"boxen": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
@@ -3904,7 +3899,8 @@
 				"ansi-regex": {
 					"version": "2.1.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"aproba": {
 					"version": "1.2.0",
@@ -3925,12 +3921,14 @@
 				"balanced-match": {
 					"version": "1.0.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"brace-expansion": {
 					"version": "1.1.11",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"balanced-match": "^1.0.0",
 						"concat-map": "0.0.1"
@@ -3945,17 +3943,20 @@
 				"code-point-at": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"concat-map": {
 					"version": "0.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"console-control-strings": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"core-util-is": {
 					"version": "1.0.2",
@@ -4072,7 +4073,8 @@
 				"inherits": {
 					"version": "2.0.3",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"ini": {
 					"version": "1.3.5",
@@ -4084,6 +4086,7 @@
 					"version": "1.0.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"number-is-nan": "^1.0.0"
 					}
@@ -4098,6 +4101,7 @@
 					"version": "3.0.4",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"brace-expansion": "^1.1.7"
 					}
@@ -4105,12 +4109,14 @@
 				"minimist": {
 					"version": "0.0.8",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"minipass": {
 					"version": "2.3.5",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"safe-buffer": "^5.1.2",
 						"yallist": "^3.0.0"
@@ -4129,6 +4135,7 @@
 					"version": "0.5.1",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"minimist": "0.0.8"
 					}
@@ -4209,7 +4216,8 @@
 				"number-is-nan": {
 					"version": "1.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"object-assign": {
 					"version": "4.1.1",
@@ -4221,6 +4229,7 @@
 					"version": "1.4.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"wrappy": "1"
 					}
@@ -4306,7 +4315,8 @@
 				"safe-buffer": {
 					"version": "5.1.2",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"safer-buffer": {
 					"version": "2.1.2",
@@ -4342,6 +4352,7 @@
 					"version": "1.0.2",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"code-point-at": "^1.0.0",
 						"is-fullwidth-code-point": "^1.0.0",
@@ -4361,6 +4372,7 @@
 					"version": "3.0.1",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -4404,12 +4416,14 @@
 				"wrappy": {
 					"version": "1.0.2",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"yallist": {
 					"version": "3.0.3",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				}
 			}
 		},
@@ -6044,11 +6058,6 @@
 			"integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
 			"dev": true
 		},
-		"jquery": {
-			"version": "3.4.1",
-			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
-			"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
-		},
 		"js-base64": {
 			"version": "2.5.1",
 			"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@@ -6646,9 +6655,9 @@
 			}
 		},
 		"lodash": {
-			"version": "4.17.11",
-			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-			"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+			"version": "4.17.15",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+			"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
 			"dev": true
 		},
 		"lodash.clonedeep": {
@@ -7173,9 +7182,9 @@
 			}
 		},
 		"mixin-deep": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
-			"integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+			"integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
 			"dev": true,
 			"requires": {
 				"for-in": "^1.0.2",
@@ -8333,11 +8342,6 @@
 				"semver-compare": "^1.0.0"
 			}
 		},
-		"popper.js": {
-			"version": "1.15.0",
-			"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
-			"integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
-		},
 		"portfinder": {
 			"version": "1.0.20",
 			"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -9221,13 +9225,20 @@
 			}
 		},
 		"rollup-pluginutils": {
-			"version": "2.7.1",
-			"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.7.1.tgz",
-			"integrity": "sha512-3nRf3buQGR9qz/IsSzhZAJyoK663kzseps8itkYHr+Z7ESuaffEPfgRinxbCRA0pf0gzLqkNKkSb8aNVTq75NA==",
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz",
+			"integrity": "sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==",
 			"dev": true,
 			"requires": {
-				"estree-walker": "^0.6.0",
-				"micromatch": "^3.1.10"
+				"estree-walker": "^0.6.1"
+			},
+			"dependencies": {
+				"estree-walker": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+					"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+					"dev": true
+				}
 			}
 		},
 		"run-async": {
@@ -9528,9 +9539,9 @@
 			"dev": true
 		},
 		"set-value": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
-			"integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+			"integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
 			"dev": true,
 			"requires": {
 				"extend-shallow": "^2.0.1",
@@ -10998,38 +11009,15 @@
 			"dev": true
 		},
 		"union-value": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
-			"integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+			"integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
 			"dev": true,
 			"requires": {
 				"arr-union": "^3.1.0",
 				"get-value": "^2.0.6",
 				"is-extendable": "^0.1.1",
-				"set-value": "^0.4.3"
-			},
-			"dependencies": {
-				"extend-shallow": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-					"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-					"dev": true,
-					"requires": {
-						"is-extendable": "^0.1.0"
-					}
-				},
-				"set-value": {
-					"version": "0.4.3",
-					"resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
-					"integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
-					"dev": true,
-					"requires": {
-						"extend-shallow": "^2.0.1",
-						"is-extendable": "^0.1.1",
-						"is-plain-object": "^2.0.1",
-						"to-object-path": "^0.3.0"
-					}
-				}
+				"set-value": "^2.0.1"
 			}
 		},
 		"unique-filename": {

From d806333a7fa7be4136b911638d941133735a7297 Mon Sep 17 00:00:00 2001
From: Preston Lamb <preston.j.lamb@gmail.com>
Date: Mon, 19 Aug 2019 17:00:17 -0600
Subject: [PATCH 5/6] adding README; changed to fromEvent instead of an actual
 click handler

---
 .../src/lib/accordion/README.md               | 28 +++++++++++++++++++
 .../accordion/accordion.component.ts          | 13 +++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 projects/ngx-plug-n-play-lib/src/lib/accordion/README.md

diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/README.md b/projects/ngx-plug-n-play-lib/src/lib/accordion/README.md
new file mode 100644
index 0000000..ea4b0b8
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/README.md
@@ -0,0 +1,28 @@
+# Accordion Module
+
+The `AccordionModule` contains one component, the `AccordionComponent`. It uses content projection to provide a trigger to open and close the accordion, and the body of the accordion. The parent component, the one implementing the accordion, thus determines all the styles for the component.
+
+Here's an example of use:
+
+```html
+<pnp-accordion>
+	<ng-container accordion-header>
+		<p class="accordion-trigger">Trigger Accordion</p>
+	</ng-container>
+	<div accordion-body>
+		<p>
+			Lorem, ipsum dolor
+		</p>
+	</div>
+</pnp-accordion>
+```
+
+When the `.accordion-trigger` is clicked, an Angular animation is triggered to either scroll up or scroll down to show the `.accordion-body`.
+
+The `AccordionComponent` has one `Input`:
+
+-   `triggerSelector: string` &mdash; This is the CSS class selector for the accordion trigger. It defaults to `.accordion-trigger`. If no projected content element has the same class, then a class inside the `AccordionComponent` is used as the trigger, `.accordion-header-container`.
+
+The component has one `Output`:
+
+-   `isCollapsedUpdated: EventEmitter<boolean>`: &mdash; The `Output` emits true or false, letting the parent component know if the accordion is open or not. That way the parent component can change its display in some way depending on the status. It doesn't need to change the visibility of the `[accordion-body]`, but maybe an icon or something like that.
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
index b9a5cb3..07be811 100644
--- a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, Output, EventEmitter, Input, ElementRef } from '@angular/core';
 import { trigger } from '@angular/animations';
 import { collapseAnimation } from '../../shared/animations/collapse-animation';
+import { fromEvent, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
 	selector: 'pnp-accordion',
@@ -13,6 +15,7 @@ export class AccordionComponent implements OnInit {
 	@Input() triggerSelector: string = '.accordion-trigger';
 	public isCollapsed: boolean = true;
 	public trigger;
+	private destroy$: Subject<boolean> = new Subject<boolean>();
 
 	constructor(private _elRef: ElementRef) {}
 
@@ -21,11 +24,17 @@ export class AccordionComponent implements OnInit {
 		this.trigger = this._elRef.nativeElement.querySelector(this.triggerSelector)
 			? this._elRef.nativeElement.querySelector(this.triggerSelector)
 			: this._elRef.nativeElement.querySelector('.accordion-header-container');
-		this.trigger.addEventListener('click', this.toggleAccordionVisibility.bind(this));
+
+		fromEvent(this.trigger, 'click')
+			.pipe(takeUntil(this.destroy$))
+			.subscribe(() => {
+				this.toggleAccordionVisibility();
+			});
 	}
 
 	ngOnDestroy() {
-		this.trigger.removeEventListener('click', this.toggleAccordionVisibility, { passive: true });
+		this.destroy$.next(true);
+		this.destroy$.complete();
 	}
 
 	updateCollapsedStatus() {

From ed2669c2dfad2b5b9f966f77ccdabdafd0326fb0 Mon Sep 17 00:00:00 2001
From: Preston Lamb <preston.j.lamb@gmail.com>
Date: Mon, 19 Aug 2019 20:51:53 -0600
Subject: [PATCH 6/6] adding demo for the accordion, as well as clarifying
 README

---
 .../src/lib/accordion/README.md               |  2 +-
 .../accordion-demo.component.html             | 50 +++++++++++++------
 .../accordion-demo.component.scss             | 11 ----
 3 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/README.md b/projects/ngx-plug-n-play-lib/src/lib/accordion/README.md
index ea4b0b8..9c54a3d 100644
--- a/projects/ngx-plug-n-play-lib/src/lib/accordion/README.md
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/README.md
@@ -7,7 +7,7 @@ Here's an example of use:
 ```html
 <pnp-accordion>
 	<ng-container accordion-header>
-		<p class="accordion-trigger">Trigger Accordion</p>
+		<p class="accordion-trigger">Trigger</p>
 	</ng-container>
 	<div accordion-body>
 		<p>
diff --git a/src/app/accordion-demo/accordion-demo.component.html b/src/app/accordion-demo/accordion-demo.component.html
index 39423df..9ab1511 100644
--- a/src/app/accordion-demo/accordion-demo.component.html
+++ b/src/app/accordion-demo/accordion-demo.component.html
@@ -1,19 +1,41 @@
+<h1>Accordion Component Demo</h1>
 <pnp-accordion>
 	<ng-container accordion-header>
-		<p class="accordion-trigger">Trigger Accordion</p>
+		<button class="btn btn-primary accordion-trigger mb-2">Open</button>
 	</ng-container>
-	<div accordion-body>
-		<p>
-			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda nulla itaque vel deserunt quos.
-			Expedita.
-		</p>
-		<p>
-			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda nulla itaque vel deserunt quos.
-			Expedita.
-		</p>
-		<p>
-			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda nulla itaque vel deserunt quos.
-			Expedita.
-		</p>
+	<div class="card" accordion-body>
+		<p class="card-body">Here is the content of the accordion dropdown.</p>
 	</div>
 </pnp-accordion>
+
+<p>
+	The <code>AccordionModule</code> contains one component, the <code>AccordionComponent</code>. It uses content
+	projection to provide a trigger to open and close the accordion, and the body of the accordion. The parent
+	component, the one implementing the accordion, thus determines all the styles for the component.
+</p>
+
+<p>
+	When the <code>.accordion-trigger</code> is clicked, an Angular animation is triggered to either scroll up or scroll
+	down to show the <code>.accordion-body</code>.
+</p>
+
+<p>The <code>AccordionComponent</code> has one <code>Input</code>:</p>
+
+<ul>
+	<li>
+		<code>triggerSelector: string</code> &mdash; This is the CSS class selector for the accordion trigger. It
+		defaults to <code>.accordion-trigger</code>. If no projected content element has the same class, then a class
+		inside the <code>AccordionComponent</code> is used as the trigger, <code>.accordion-header-container</code>.
+	</li>
+</ul>
+
+<p>The component has one <code>Output</code>:</p>
+
+<ul>
+	<li>
+		<code>isCollapsedUpdated: EventEmitter&lt;boolean&gt;</code>: &mdash; The <code>Output</code> emits true or
+		false, letting the parent component know if the accordion is open or not. That way the parent component can
+		change its display in some way depending on the status. It doesn't need to change the visibility of the
+		<code>[accordion-body]</code>, but maybe an icon or something like that.
+	</li>
+</ul>
diff --git a/src/app/accordion-demo/accordion-demo.component.scss b/src/app/accordion-demo/accordion-demo.component.scss
index 8904aaf..e69de29 100644
--- a/src/app/accordion-demo/accordion-demo.component.scss
+++ b/src/app/accordion-demo/accordion-demo.component.scss
@@ -1,11 +0,0 @@
-.accordion-trigger {
-	border: 1px solid black;
-	padding: 5px;
-	cursor: pointer;
-	margin-bottom: 0;
-}
-
-div[accordion-body] {
-	border: 1px solid red;
-	padding: 25px;
-}