fix(accordion): allign with Bootstrap 4.beta markup

Closes #1050 Closes #1332
ng-bootstrap · Aug 22, 2017 · e32fb24 · e32fb24
1 parent f6cf01b
commit e32fb24
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -1,5 +1,4 @@
 import {TestBed, ComponentFixture, inject} from '@angular/core/testing';
-import {By} from '@angular/platform-browser';
 import {createGenericTestComponent} from '../test/common';
 
 import {Component} from '@angular/core';
@@ -12,15 +11,15 @@ const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
 function getPanels(element: HTMLElement): HTMLDivElement[] {
-  return <HTMLDivElement[]>Array.from(element.querySelectorAll('div .card-header'));
+  return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .card-header'));
 }
 
 function getPanelsContent(element: HTMLElement): HTMLDivElement[] {
-  return <HTMLDivElement[]>Array.from(element.querySelectorAll('div .card-body'));
+  return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .card-body'));
 }
 
 function getPanelsTitle(element: HTMLElement): HTMLDivElement[] {
-  return <HTMLDivElement[]>Array.from(element.querySelectorAll('div .card-header a'));
+  return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .card-header a'));
 }
 
 function getButton(element: HTMLElement, index: number): HTMLButtonElement {

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -95,22 +95,22 @@ export interface NgbPanelChangeEvent {
   exportAs: 'ngbAccordion',
   host: {'role': 'tablist', '[attr.aria-multiselectable]': '!closeOtherPanels'},
   template: `
-  <div class="card">
     <ng-template ngFor let-panel [ngForOf]="panels">
-      <div role="tab" id="{{panel.id}}-header"
-        [class]="'card-header ' + (panel.type ? 'card-'+panel.type: type ? 'card-'+type : '')" [class.active]="isOpen(panel.id)">
-        <a href (click)="!!toggle(panel.id)" [class.text-muted]="panel.disabled" [attr.tabindex]="(panel.disabled ? '-1' : null)"
-          [attr.aria-expanded]="isOpen(panel.id)" [attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)"
-          [attr.aria-disabled]="panel.disabled">
-          {{panel.title}}<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
-        </a>
-      </div>
-      <div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" 
-           class="card-body {{isOpen(panel.id) ? 'show' : null}}" *ngIf="!destroyOnHide || isOpen(panel.id)">
-           <ng-template [ngTemplateOutlet]="panel.contentTpl.templateRef"></ng-template>
+      <div class="card">
+        <div role="tab" id="{{panel.id}}-header"
+          [class]="'card-header ' + (panel.type ? 'card-'+panel.type: type ? 'card-'+type : '')" [class.active]="isOpen(panel.id)">
+          <a href (click)="!!toggle(panel.id)" [class.text-muted]="panel.disabled" [attr.tabindex]="(panel.disabled ? '-1' : null)"
+            [attr.aria-expanded]="isOpen(panel.id)" [attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)"
+            [attr.aria-disabled]="panel.disabled">
+            {{panel.title}}<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
+          </a>
+        </div>
+        <div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" 
+             class="card-body {{isOpen(panel.id) ? 'show' : null}}" *ngIf="!destroyOnHide || isOpen(panel.id)">
+             <ng-template [ngTemplateOutlet]="panel.contentTpl.templateRef"></ng-template>
+        </div>
       </div>
     </ng-template>
-  </div>
   `
 })
 export class NgbAccordion implements AfterContentChecked {