import { Component, Input, ContentChild, Output, EventEmitter, HostBinding } from '@angular/core';
import { Subscription } from 'rxjs';
import { RExpansionPanelHeaderComponent } from './expansion-panel-header/expansion-panel-header.component';
import { R_EXPANSION_PANEL_ANIMATIONS } from './expansion-panel.animations';
export class RExpansionPanelComponent {
    constructor() {
        this.subs = new Subscription();
        this.fullWidth = false;
        this.expanded = false;
        this.expandedChange = new EventEmitter();
    }
    ngOnInit() {
        if (this.header) {
            this.header.expanded = this.expanded;
            this.subs.add(this.header.onClick.subscribe(() => this.toggle()));
        }
    }
    expand() {
        this._toggle(true);
    }
    collapse() {
        this._toggle(false);
    }
    toggle() {
        this._toggle();
    }
    _toggle(expanded) {
        if (expanded === undefined) {
            this.expanded = !this.expanded;
        }
        else if (expanded && !this.expanded) {
            this.expanded = true;
        }
        else if (!expanded && this.expanded) {
            this.expanded = true;
        }
        this.header.expanded = this.expanded;
        this.expandedChange.next(this.expanded);
    }
    get expandedClass() {
        return this.expanded;
    }
    ngOnDestroy() {
        this.subs.unsubscribe();
    }
}
RExpansionPanelComponent.decorators = [
    { type: Component, args: [{
                selector: 'r-expansion-panel',
                template: "<ng-content select=\"r-expansion-panel-header\"></ng-content>\r\n<div [@expand]=\"{value: expanded ? 'expanded' : 'collapsed'}\" class=\"body\">\r\n  <ng-content select=\"r-expansion-panel-body\"></ng-content>\r\n</div>",
                animations: R_EXPANSION_PANEL_ANIMATIONS,
                styles: [":host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}:host .body{display:flex}"]
            },] }
];
RExpansionPanelComponent.propDecorators = {
    fullWidth: [{ type: Input }],
    expanded: [{ type: Input }],
    expandedChange: [{ type: Output }],
    header: [{ type: ContentChild, args: [RExpansionPanelHeaderComponent, { static: true },] }],
    expandedClass: [{ type: HostBinding, args: ['class.expanded',] }]
};
//# sourceMappingURL=expansion-panel.component.js.map