import * as tslib_1 from "tslib";
import { Component, Input, Output, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { collapseAnimation } from '../core/animation/collapse-animations';
var AccordionComponent = /** @class */ (function () {
    function AccordionComponent() {
        /**
         * 激活的panel下标, 如果为-1视为全部折叠
         * @default 0
         */
        this.activeIndex = 0;
        /**
         * 是否hover展开
         *
         */
        this.hoverable = false;
        /**
         * 折叠方式，互斥折叠 or 全部可折叠
         * @default false 互斥折叠
         *
         */
        this.collapsible = false;
        /**
         *  panel 活动状态发生改变时事件 emit
         *
         */
        this.change = new EventEmitter();
    }
    /**
     * 变更活动状态的索引
     *
     * @param {number} activeIndex - 指定索引
     */
    AccordionComponent.prototype.changeActiveIndex = function (activeIndex) {
        this.activeIndex = activeIndex;
        this.change.emit({
            activeIndex: activeIndex
        });
    };
    /**
     * 激活指定panel
     *
     * @param {number} activeIndex - 指定索引
     */
    AccordionComponent.prototype.onActivatePanel = function (activeIndex) {
        // 全部可折叠
        if (this.collapsible) {
            // 该元素内容已展开，折叠收缩
            if (this.activeIndex === activeIndex) {
                activeIndex = -1;
            }
        }
        // 互斥折叠
        else {
            // 该元素内容已展开，什么都不做
            if (this.activeIndex === activeIndex) {
                return;
            }
        }
        // 激活当前元素
        this.changeActiveIndex(activeIndex);
    };
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Array)
    ], AccordionComponent.prototype, "panels", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], AccordionComponent.prototype, "activeIndex", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], AccordionComponent.prototype, "hoverable", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], AccordionComponent.prototype, "collapsible", void 0);
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], AccordionComponent.prototype, "change", void 0);
    AccordionComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-accordion',
            template: "<div class=\"nb-accordion\"><div *ngIf=\"hoverable; then hoverBlock; else clickBlock\"></div><ng-template #clickBlock><div class=\"nb-accordion-panel\" *ngFor=\"let panel of panels; let index = index\" (click)=\"onActivatePanel(index)\" [class.nb-accordion-panel-active]=\"index === activeIndex\"><div class=\"nb-accordion-panel-header\"><i class=\"iconfont icon-right\"></i> {{ panel.header }}</div><div class=\"nb-accordion-panel-content\" [@collapseAnimation]=\"index === activeIndex ? 'active' : 'inactive'\">{{ panel.content }}</div></div></ng-template><ng-template #hoverBlock><div class=\"nb-accordion-panel\" *ngFor=\"let panel of panels; let index = index\" (mouseover)=\"onActivatePanel(index)\" [class.nb-accordion-panel-active]=\"index === activeIndex\"><div class=\"nb-accordion-header\"><i class=\"iconfont icon-right\"></i> {{ panel.header }}</div><div class=\"nb-accordion-content\" [@collapseAnimation]=\"index === activeIndex ? 'active' : 'inactive'\">{{ panel.content }}</div></div></ng-template></div>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            animations: [collapseAnimation],
            preserveWhitespaces: false,
            host: {
                'class': 'nb-widget nb-accordion'
            },
            exportAs: 'nbAccordion'
        }),
        tslib_1.__metadata("design:paramtypes", [])
    ], AccordionComponent);
    return AccordionComponent;
}());
export { AccordionComponent };
//# sourceMappingURL=accordion.js.map