(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@sd-angular/core/header-title'), require('@angular/animations')) :
    typeof define === 'function' && define.amd ? define('@sd-angular/core/group', ['exports', '@angular/core', '@angular/common', '@angular/material/icon', '@sd-angular/core/header-title', '@angular/animations'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.group = {}), global.ng.core, global.ng.common, global.ng.material.icon, global['sd-angular'].core['header-title'], global.ng.animations));
}(this, (function (exports, core, common, icon, headerTitle, animations) { 'use strict';

    var SdGroupComponent = /** @class */ (function () {
        function SdGroupComponent() {
            var _this = this;
            this.height = 'auto';
            this.isExpanded = true;
            this.expandable = false;
            this.onExpand = function () {
                if (!_this.expandable) {
                    return;
                }
                _this.isExpanded = !_this.isExpanded;
            };
            this.open = function () {
                _this.isExpanded = true;
            };
            this.close = function () {
                _this.isExpanded = false;
            };
        }
        Object.defineProperty(SdGroupComponent.prototype, "_isExpanded", {
            set: function (val) {
                this.isExpanded = (val === '') || val;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(SdGroupComponent.prototype, "_expandable", {
            set: function (val) {
                this.expandable = (val === '') || val;
            },
            enumerable: false,
            configurable: true
        });
        SdGroupComponent.prototype.ngOnInit = function () {
            if (this.expandable) {
                this.isExpanded = true;
            }
        };
        return SdGroupComponent;
    }());
    SdGroupComponent.decorators = [
        { type: core.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: [
                        animations.trigger('expand', [
                            animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
                            animations.state('expanded', animations.style({ height: '*', visibility: 'visible' })),
                            animations.transition('expanded <=> collapsed', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                        ]),
                    ],
                    changeDetection: core.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 = function () { return []; };
    SdGroupComponent.propDecorators = {
        title: [{ type: core.Input }],
        description: [{ type: core.Input }],
        icon: [{ type: core.Input }],
        tooltip: [{ type: core.Input }],
        height: [{ type: core.Input }],
        _isExpanded: [{ type: core.Input, args: ['isExpanded',] }],
        _expandable: [{ type: core.Input, args: ['expandable',] }]
    };

    var SdGroupModule = /** @class */ (function () {
        function SdGroupModule() {
        }
        return SdGroupModule;
    }());
    SdGroupModule.decorators = [
        { type: core.NgModule, args: [{
                    imports: [
                        common.CommonModule,
                        icon.MatIconModule,
                        headerTitle.SdHeaderTitleModule
                    ],
                    declarations: [SdGroupComponent],
                    exports: [SdGroupComponent]
                },] }
    ];

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

    exports.SdGroupModule = SdGroupModule;
    exports.ɵa = SdGroupComponent;

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=sd-angular-core-group.umd.js.map
