fix(accordion): bs4 template updated

valor-software · Dec 24, 2016 · 53c0401 · 53c0401
1 parent 248efc3
commit 53c0401
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 44 deletions.
diff --git a/demo/src/app/components/accordion/demos/accordion-demo.component.html b/demo/src/app/components/accordion/demos/accordion-demo.component.html
@@ -3,7 +3,8 @@
           (click)="group.isOpen = !group.isOpen">Toggle last panel
   </button>
   <button type="button" class="btn btn-primary btn-sm"
-          (click)="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel
+          (click)="status.isFirstDisabled = ! status.isFirstDisabled">Enable /
+    Disable first panel
   </button>
 </p>
 
@@ -21,18 +22,20 @@
     This content is straight in the template.
   </accordion-group>
   <accordion-group *ngFor="let group of groups" [heading]="group.title">
-     {{ group?.content }}
+    {{ group?.content }}
   </accordion-group>
   <accordion-group heading="Dynamic Body Content">
     <p>The body of the accordion group grows to fit the contents</p>
-    <button type="button" class="btn btn-primary btn-sm" (click)="addItem()">Add Item</button>
+    <button type="button" class="btn btn-primary btn-sm" (click)="addItem()">Add
+      Item
+    </button>
     <div *ngFor="let item of items">{{item}}</div>
   </accordion-group>
   <accordion-group #group [isOpen]="status.open">
     <div accordion-heading>
-      I can have markup, too!
-      <i class="pull-right glyphicon"
-         [ngClass]="{'glyphicon-chevron-down': group?._isOpen, 'glyphicon-chevron-right': !group?._isOpen}"></i>
+        I can have markup, too!
+        <i class="pull-right float-xs-right glyphicon"
+           [ngClass]="{'glyphicon-chevron-down': group?._isOpen, 'glyphicon-chevron-right': !group?._isOpen}"></i>
     </div>
     This is just some content to illustrate fancy headings.
   </accordion-group>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-bootstrap-base",
   "version": "1.1.16-9",
-  "description": "angular2 bootstrap components",
+  "description": "Native Angular Bootstrap Components",
   "private": true,
   "scripts": {
     "lite-server": "lite-server -c demo/bs-config.json",
@@ -32,9 +32,11 @@
   "module": "index.js",
   "typings": "index.d.ts",
   "keywords": [
+    "ng",
+    "ng-bootstap",
+    "angular",
     "angular2",
     "bootstrap",
-    "angularjs",
     "twitter-bootstrap"
   ],
   "author": "Dmitriy Shekhovtsov <[email protected]>",
@@ -57,6 +59,7 @@
     "@angular/core": "^2.4.0",
     "@angular/forms": "^2.4.0",
     "@angular/http": "^2.4.0",
+    "@angular/language-service": "2.4.1",
     "@angular/platform-browser": "^2.4.0",
     "@angular/platform-browser-dynamic": "^2.4.0",
     "@angular/router": "^3.4.0",

diff --git a/src/accordion/accordion-group.component.ts b/src/accordion/accordion-group.component.ts
@@ -1,11 +1,11 @@
 import {
   Component, HostBinding, Inject, Input, OnDestroy, OnInit
 } from '@angular/core';
-
+import { isBs3 } from '../utils/ng2-bootstrap-config';
 import { AccordionComponent } from './accordion.component';
 
 /*
-* ### Accordion heading
+ * ### Accordion heading
 
  Instead of using `heading` attribute on the `accordion-group`, you can use an `accordion-heading` attribute on `any` element inside of a group that will be used as group's header template.
 
@@ -14,63 +14,67 @@ import { AccordionComponent } from './accordion.component';
 @Component({
   selector: 'accordion-group, accordion-panel',
   template: `
-    <div class="panel" [ngClass]="panelClass">
-      <div class="panel-heading" (click)="toggleOpen($event)">
-        <h4 class="panel-title">
-          <a href tabindex="0" class="accordion-toggle">
-            <span *ngIf="heading" [ngClass]="{'text-muted': isDisabled}">{{heading}}</span>
-            <ng-content select="[accordion-heading]"></ng-content>
-          </a>
-        </h4>
-      </div>
-      <div class="panel-collapse collapse" [collapse]="!isOpen">
-        <div class="panel-body">
-          <ng-content></ng-content>
-        </div>
-      </div>
+<div class="panel card" [ngClass]="panelClass">
+  <div class="panel-heading card-header" role="tab" (click)="toggleOpen($event)">
+    <div class="panel-title card-title">
+      <a href 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>
+      </a>
+    </div>
+  </div>
+  <div class="panel-collapse collapse" role="tabpanel" [collapse]="!isOpen">
+    <div class="panel-body card-block">
+      <ng-content></ng-content>
     </div>
+  </div>
+</div>
   `
 })
 export class AccordionPanelComponent implements OnInit, OnDestroy {
   /** Clickable text in accordion's group header, check `accordion heading` below for using html in header */
-  @Input() public heading:string;
+  @Input() public heading: string;
   /** Provides an ability to use Bootstrap's contextual panel classes (`panel-primary`, `panel-success`, `panel-info`, etc...). List of all available classes [link](http://getbootstrap.com/components/#panels-alternatives) */
-  @Input() public panelClass:string;
+  @Input() public panelClass: string;
   /** if <code>true</code> — disables accordion group */
-  @Input() public isDisabled:boolean;
+  @Input() public isDisabled: boolean;
 
   // Questionable, maybe .panel-open should be on child div.panel element?
   /** Is accordion group open or closed */
   @HostBinding('class.panel-open')
   @Input()
-  public get isOpen():boolean {
+  public get isOpen(): boolean {
     return this._isOpen;
   }
 
-  public set isOpen(value:boolean) {
+  public set isOpen(value: boolean) {
     this._isOpen = value;
     if (value) {
       this.accordion.closeOtherPanels(this);
     }
   }
 
-  protected _isOpen:boolean;
-  protected accordion:AccordionComponent;
+  public get isBs3(): boolean {
+    return isBs3();
+  }
+
+  protected _isOpen: boolean;
+  protected accordion: AccordionComponent;
 
-  public constructor(@Inject(AccordionComponent) accordion:AccordionComponent) {
+  public constructor(@Inject(AccordionComponent) accordion: AccordionComponent) {
     this.accordion = accordion;
   }
 
-  public ngOnInit():any {
+  public ngOnInit(): any {
     this.panelClass = this.panelClass || 'panel-default';
     this.accordion.addGroup(this);
   }
 
-  public ngOnDestroy():any {
+  public ngOnDestroy(): any {
     this.accordion.removeGroup(this);
   }
 
-  public toggleOpen(event:Event):any {
+  public toggleOpen(event: Event): any {
     event.preventDefault();
     if (!this.isDisabled) {
       this.isOpen = !this.isOpen;

diff --git a/src/accordion/accordion.component.ts b/src/accordion/accordion.component.ts
@@ -7,7 +7,11 @@ import { AccordionConfig } from './accordion.config';
   selector: 'accordion',
   template: `<ng-content></ng-content>`,
   // tslint:disable-next-line
-  host: {'[class.panel-group]': 'true'}
+  host: {
+    '[class.panel-group]': 'true',
+    '[attr.aria-multiselectable]':'closeOthers',
+    role: 'tablist'
+  }
 })
 export class AccordionComponent {
   /** if `true` expanding one item will close all others */

diff --git a/yarn.lock b/yarn.lock
@@ -67,7 +67,7 @@
   dependencies:
     tsickle "^0.2"
 
-"@ngtools/webpack@^1.0.0":
+"@ngtools/webpack@1.2.1", "@ngtools/webpack@^1.0.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.2.1.tgz#b32a2cda4aabb14518b3a16840b30d6a0e2f131e"
   dependencies:
@@ -1391,7 +1391,7 @@ [email protected]:
     request ">=2.42.0"
     urlgrey ">=0.4.0"
 
-codelyzer@~2.0.0-beta.1:
+codelyzer@~2.0.0-beta.4:
   version "2.0.0-beta.4"
   resolved "https://registry.yarnpkg.com/codelyzer/-/codelyzer-2.0.0-beta.4.tgz#644c5ffcdcc6c933991e3790a29c5085e80ae4ca"
   dependencies:
@@ -3231,7 +3231,7 @@ got@^5.0.0:
     unzip-response "^1.0.2"
     url-parse-lax "^1.0.0"
 
-[email protected]:
+[email protected], graceful-fs@^4.1.0, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"
 
@@ -3241,10 +3241,6 @@ graceful-fs@^3.0.5:
   dependencies:
     natives "^1.1.0"
 
-graceful-fs@^4.1.0, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
-
 graceful-fs@~1:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-1.2.3.tgz#15a4806a57547cb2d2dbf27f42e89a8c3451b364"
@@ -8104,6 +8100,6 @@ [email protected]:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.7.2.tgz#1a62b6be4b24d1b935e4566b0b4386b66966d1a7"
 
-zone.js@^0.7.2:
+zone.js@^0.7.2, zone.js@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.7.4.tgz#0e624fe5b724450ee433495deff15c02b3908ee0"