From 53c0401fd1d69eacd211c90eaf5d44d24689d516 Mon Sep 17 00:00:00 2001 From: Dmitriy Schekhovtsov Date: Fri, 23 Dec 2016 01:12:11 +0200 Subject: [PATCH] fix(accordion): bs4 template updated --- .../demos/accordion-demo.component.html | 15 +++-- package.json | 7 ++- src/accordion/accordion-group.component.ts | 58 ++++++++++--------- src/accordion/accordion.component.ts | 6 +- yarn.lock | 12 ++-- 5 files changed, 54 insertions(+), 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 index 6452db2b3e..37aa3a2933 100644 --- 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

@@ -21,18 +22,20 @@ This content is straight in the template. - {{ group?.content }} + {{ group?.content }}

The body of the accordion group grows to fit the contents

- +
{{item}}
- I can have markup, too! - + I can have markup, too! +
This is just some content to illustrate fancy headings. diff --git a/package.json b/package.json index 03d32b870e..9a45930a96 100644 --- 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 ", @@ -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 index d36175f9f2..223516db2b 100644 --- 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: ` -
-
-

- - {{heading}} - - -

-
-
-
- -
-
+
+ +
+
+
+
+
` }) 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 true — 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 index cab03ab2e2..c4f6e4845f 100644 --- a/src/accordion/accordion.component.ts +++ b/src/accordion/accordion.component.ts @@ -7,7 +7,11 @@ import { AccordionConfig } from './accordion.config'; selector: 'accordion', template: ``, // 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 index 9f43907f1c..aff642073a 100644 --- 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 @@ codecov@1.0.1: 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" -graceful-fs@4.1.10: +graceful-fs@4.1.10, 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 @@ zone.js@0.7.2: 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"