import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { SdHeaderTitleModule } from '@sd-angular/core/header-title';
import { trigger, state, style, transition, animate } from '@angular/animations';

class SdGroupComponent {
    constructor() {
        this.height = 'auto';
        this.isExpanded = true;
        this.expandable = false;
        this.onExpand = () => {
            if (!this.expandable) {
                return;
            }
            this.isExpanded = !this.isExpanded;
        };
        this.open = () => {
            this.isExpanded = true;
        };
        this.close = () => {
            this.isExpanded = false;
        };
    }
    set _isExpanded(val) {
        this.isExpanded = (val === '') || val;
    }
    set _expandable(val) {
        this.expandable = (val === '') || val;
    }
    ngOnInit() {
        if (this.expandable) {
            this.isExpanded = true;
        }
    }
}
SdGroupComponent.decorators = [
    { type: Component, args: [{
                selector: 'sd-group',
                template: "<div class=\"c-sd-group\">\r\n  <div (click)=\"onExpand()\" class=\"c-sd-group-header\">\r\n    <div #headerTitle>\r\n      <ng-content select=\"[sdGroupTitle]\"></ng-content>\r\n    </div>\r\n    <sd-header-title *ngIf=\"!headerTitle?.children?.length\" [title]=\"title\" [tooltip]=\"tooltip\"\r\n      [description]=\"description\" [icon]=\"icon || (isExpanded ? 'keyboard_arrow_down':'chevron_right')\">\r\n      <div sdHeaderRight>\r\n        <ng-content select=\"[sdGroupHeaderRight]\"></ng-content>\r\n      </div>\r\n    </sd-header-title>\r\n  </div>\r\n  <div [@expand]=\"isExpanded ? 'expanded' : 'collapsed'\">\r\n    <ng-container *ngIf=\"isExpanded\">\r\n      <div [style.height]=\"height\" class=\"c-sd-group-body\">\r\n        <ng-content select=\"[sdGroupBody]\"></ng-content>\r\n      </div>\r\n    </ng-container>\r\n    <ng-content select=\"[sdGroupFooter]\"></ng-content>\r\n  </div>\r\n</div>",
                animations: [
                    trigger('expand', [
                        state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
                        state('expanded', style({ height: '*', visibility: 'visible' })),
                        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                    ]),
                ],
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".c-sd-group{background:#fff;border:1px solid #f0f0f0;border-radius:4px;overflow:hidden}.c-sd-group .c-sd-group-header{align-items:center;background:#fff;cursor:pointer;display:flex;padding:12px}.c-sd-group .c-sd-group-header:hover{background:#f5f5f5}.c-sd-group .c-sd-group-body{display:flex;flex-direction:column;padding:8px 12px}"]
            },] }
];
SdGroupComponent.ctorParameters = () => [];
SdGroupComponent.propDecorators = {
    title: [{ type: Input }],
    description: [{ type: Input }],
    icon: [{ type: Input }],
    tooltip: [{ type: Input }],
    height: [{ type: Input }],
    _isExpanded: [{ type: Input, args: ['isExpanded',] }],
    _expandable: [{ type: Input, args: ['expandable',] }]
};

class SdGroupModule {
}
SdGroupModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatIconModule,
                    SdHeaderTitleModule
                ],
                declarations: [SdGroupComponent],
                exports: [SdGroupComponent]
            },] }
];

/**
 * Generated bundle index. Do not edit.
 */

export { SdGroupModule, SdGroupComponent as ɵa };
//# sourceMappingURL=sd-angular-core-group.js.map
