feat(accordion): add custom css class at the card level (#3563)

Fixes #2262

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();

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>