From 8ea21bf349bea9f57a4135162e0ef865e33a5303 Mon Sep 17 00:00:00 2001
From: gpolychronis <54309994+gpolychronis@users.noreply.github.com>
Date: Thu, 13 Feb 2020 10:54:16 +0100
Subject: [PATCH] feat(accordion): add custom css class at the card level
 (#3563)

Fixes #2262
---
 src/accordion/accordion.spec.ts | 15 +++++++++++++++
 src/accordion/accordion.ts      |  7 ++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
index 0d6dc5c37c..a4fef1a0e5 100644
--- a/src/accordion/accordion.spec.ts
+++ b/src/accordion/accordion.spec.ts
@@ -493,6 +493,21 @@ describe('ngb-accordion', () => {
     expect(headingLinks[0].disabled).toBeTruthy();
   });
 
+  it('should have the custom class', () => {
+    const testHtml = `
+      <ngb-accordion #acc="ngbAccordion">
+        <ngb-panel *ngFor="let panel of panels" [id]="panel.id" [cardClass]="'custom-class' + panel.id"></ngb-panel>
+      </ngb-accordion>
+    `;
+    const fixture = createTestComponent(testHtml);
+    const cards = <HTMLDivElement[]>Array.from(fixture.nativeElement.querySelectorAll('.card'));
+
+    fixture.detectChanges();
+    expect(cards[0]).toHaveCssClass('custom-classone');
+    expect(cards[1]).toHaveCssClass('custom-classtwo');
+    expect(cards[2]).toHaveCssClass('custom-classthree');
+  });
+
   it('should remove collapsed panels content from DOM', () => {
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
index cb8aa4b4bf..3eb312c789 100644
--- a/src/accordion/accordion.ts
+++ b/src/accordion/accordion.ts
@@ -97,6 +97,11 @@ export class NgbPanel implements AfterContentChecked {
    */
   @Input() type: string;
 
+  /**
+   * An optional class applied to the card that wraps the panel.
+   */
+  @Input() cardClass: string;
+
   titleTpl: NgbPanelTitle | null;
   headerTpl: NgbPanelHeader | null;
   contentTpl: NgbPanelContent | null;
@@ -156,7 +161,7 @@ export interface NgbPanelChangeEvent {
       </button>
     </ng-template>
     <ng-template ngFor let-panel [ngForOf]="panels">
-      <div class="card">
+      <div [class]="'card ' + panel.cardClass || ''">
         <div role="tab" id="{{panel.id}}-header" [class]="'card-header ' + (panel.type ? 'bg-'+panel.type: type ? 'bg-'+type : '')">
           <ng-template [ngTemplateOutlet]="panel.headerTpl?.templateRef || t"
                        [ngTemplateOutletContext]="{$implicit: panel, opened: panel.isOpen}"></ng-template>