fix(acordion): space beetween accordion groups (#2014)

fixes #1854
valor-software · Jun 27, 2017 · ad2da54 · ad2da54
1 parent 31ee792
commit ad2da54
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/demo/src/app/components/+accordion/demos/dymanic/dynamic.ts b/demo/src/app/components/+accordion/demos/dymanic/dynamic.ts
@@ -9,7 +9,7 @@ export class DemoAccordionDynamicComponent {
 
   public status: any = {
     isFirstOpen: true,
-    isOpen: false
+    isOpen: true
   };
 
   public groups: any[] = [

diff --git a/src/accordion/accordion-group.component.ts b/src/accordion/accordion-group.component.ts
@@ -14,22 +14,26 @@ import { AccordionComponent } from './accordion.component';
 @Component({
   selector: 'accordion-group, accordion-panel',
   template: `
-<div class="panel card" [ngClass]="panelClass">
-  <div class="panel-heading card-header" role="tab" (click)="toggleOpen($event)">
-    <div class="panel-title">
-      <div role="button" class="accordion-toggle" [attr.aria-expanded]="isOpen">
-        <div *ngIf="heading"[ngClass]="{'text-muted': isDisabled}">{{heading}}</div>
-        <ng-content select="[accordion-heading]"></ng-content>
+    <div class="panel card" [ngClass]="panelClass">
+      <div class="panel-heading card-header" role="tab" (click)="toggleOpen($event)">
+        <div class="panel-title card-title">
+          <div role="button" class="accordion-toggle" [attr.aria-expanded]="isOpen">
+            <div *ngIf="heading"[ngClass]="{'text-muted': isDisabled}">{{heading}}</div>
+            <ng-content select="[accordion-heading]"></ng-content>
+          </div>
+        </div>
+      </div>
+      <div class="panel-collapse collapse" role="tabpanel" [collapse]="!isOpen">
+        <div class="panel-body card-block">
+          <ng-content></ng-content>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="panel-collapse collapse" role="tabpanel" [collapse]="!isOpen">
-    <div class="panel-body card-block">
-      <ng-content></ng-content>
-    </div>
-  </div>
-</div>
-  `
+  `,
+  host: {
+    class: 'panel',
+    style: 'display: block'
+  }
 })
 export class AccordionPanelComponent implements OnInit, OnDestroy {
   /** Clickable text in accordion's group header, check `accordion heading` below for using html in header */

diff --git a/src/accordion/accordion.component.ts b/src/accordion/accordion.component.ts
@@ -8,9 +8,11 @@ import { AccordionConfig } from './accordion.config';
   template: `<ng-content></ng-content>`,
   // tslint:disable-next-line
   host: {
-    '[class.panel-group]': 'true',
+    //'[.class.panel-group]': 'true',
     '[attr.aria-multiselectable]':'closeOthers',
-    role: 'tablist'
+    role: 'tablist',
+    class: 'panel-group',
+    style: 'display: block'
   }
 })
 export class AccordionComponent {