ng2-bootstrap
Version:
Native Angular Bootstrap Components
69 lines (66 loc) • 3.29 kB
JavaScript
;
var core_1 = require('@angular/core');
var ng2_bootstrap_config_1 = require('../utils/ng2-bootstrap-config');
var accordion_component_1 = require('./accordion.component');
/*
* ### 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.
* */
var AccordionPanelComponent = (function () {
function AccordionPanelComponent(accordion) {
this.accordion = accordion;
}
Object.defineProperty(AccordionPanelComponent.prototype, "isOpen", {
// Questionable, maybe .panel-open should be on child div.panel element?
/** Is accordion group open or closed */
get: function () {
return this._isOpen;
},
set: function (value) {
this._isOpen = value;
if (value) {
this.accordion.closeOtherPanels(this);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(AccordionPanelComponent.prototype, "isBs3", {
get: function () {
return ng2_bootstrap_config_1.isBs3();
},
enumerable: true,
configurable: true
});
AccordionPanelComponent.prototype.ngOnInit = function () {
this.panelClass = this.panelClass || 'panel-default';
this.accordion.addGroup(this);
};
AccordionPanelComponent.prototype.ngOnDestroy = function () {
this.accordion.removeGroup(this);
};
AccordionPanelComponent.prototype.toggleOpen = function (event) {
event.preventDefault();
if (!this.isDisabled) {
this.isOpen = !this.isOpen;
}
};
AccordionPanelComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'accordion-group, accordion-panel',
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 <a href 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 </a>\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 "
},] },
];
/** @nocollapse */
AccordionPanelComponent.ctorParameters = function () { return [
{ type: accordion_component_1.AccordionComponent, decorators: [{ type: core_1.Inject, args: [accordion_component_1.AccordionComponent,] },] },
]; };
AccordionPanelComponent.propDecorators = {
'heading': [{ type: core_1.Input },],
'panelClass': [{ type: core_1.Input },],
'isDisabled': [{ type: core_1.Input },],
'isOpen': [{ type: core_1.HostBinding, args: ['class.panel-open',] }, { type: core_1.Input },],
};
return AccordionPanelComponent;
}());
exports.AccordionPanelComponent = AccordionPanelComponent;