UNPKG

3.14 kBJavaScriptView Raw
1import { Component, HostBinding, Inject, Input } from '@angular/core';
2import { isBs3 } from '../utils/ng2-bootstrap-config';
3import { AccordionComponent } from './accordion.component';
4/*
5 * ### Accordion heading
6
7 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.
8
9 * */
10export var AccordionPanelComponent = (function () {
11 function AccordionPanelComponent(accordion) {
12 this.accordion = accordion;
13 }
14 Object.defineProperty(AccordionPanelComponent.prototype, "isOpen", {
15 // Questionable, maybe .panel-open should be on child div.panel element?
16 /** Is accordion group open or closed */
17 get: function () {
18 return this._isOpen;
19 },
20 set: function (value) {
21 this._isOpen = value;
22 if (value) {
23 this.accordion.closeOtherPanels(this);
24 }
25 },
26 enumerable: true,
27 configurable: true
28 });
29 Object.defineProperty(AccordionPanelComponent.prototype, "isBs3", {
30 get: function () {
31 return isBs3();
32 },
33 enumerable: true,
34 configurable: true
35 });
36 AccordionPanelComponent.prototype.ngOnInit = function () {
37 this.panelClass = this.panelClass || 'panel-default';
38 this.accordion.addGroup(this);
39 };
40 AccordionPanelComponent.prototype.ngOnDestroy = function () {
41 this.accordion.removeGroup(this);
42 };
43 AccordionPanelComponent.prototype.toggleOpen = function (event) {
44 if (!this.isDisabled) {
45 this.isOpen = !this.isOpen;
46 }
47 };
48 AccordionPanelComponent.decorators = [
49 { type: Component, args: [{
50 selector: 'accordion-group, accordion-panel',
51 template: "\n<div class=\"panel card\" [ngClass]=\"panelClass\">\n <div class=\"panel-heading card-header\" role=\"tab\" (click)=\"toggleOpen($event)\">\n <div class=\"panel-title card-title\">\n <div role=\"button\" class=\"accordion-toggle\" [attr.aria-expanded]=\"isOpen\">\n <div *ngIf=\"heading\"[ngClass]=\"{'text-muted': isDisabled}\">{{heading}}</div>\n <ng-content select=\"[accordion-heading]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"panel-collapse collapse\" role=\"tabpanel\" [collapse]=\"!isOpen\">\n <div class=\"panel-body card-block\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n "
52 },] },
53 ];
54 /** @nocollapse */
55 AccordionPanelComponent.ctorParameters = function () { return [
56 { type: AccordionComponent, decorators: [{ type: Inject, args: [AccordionComponent,] },] },
57 ]; };
58 AccordionPanelComponent.propDecorators = {
59 'heading': [{ type: Input },],
60 'panelClass': [{ type: Input },],
61 'isDisabled': [{ type: Input },],
62 'isOpen': [{ type: HostBinding, args: ['class.panel-open',] }, { type: Input },],
63 };
64 return AccordionPanelComponent;
65}());
66//# sourceMappingURL=accordion-group.component.js.map
\No newline at end of file