import * as tslib_1 from "tslib";
import { Component, Input, Output, EventEmitter, ContentChild, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, Renderer2, ElementRef } from '@angular/core';
import { OnChange } from '../core/decorators';
import { addClass } from '../util/dom';
/**
 * Card Component
 */
var CardComponent = /** @class */ (function () {
    function CardComponent(_el, _render) {
        this._el = _el;
        this._render = _render;
        /**
         * the event emitted when the component is disposed(removed from the dom)
         */
        this.dispose = new EventEmitter();
        /**
         * card width, in pixels
         * @default 540
         */
        this.width = 540;
        /**
         * @docs-private
         */
        this.widthChange = new EventEmitter();
        /**
         * whether the card can be disposed
         * @default false
         */
        this.disposable = false;
        /**
         * the card extra theme, i.e. when theme is 'dialog', an extra class `nb-card-dialog`
         * will be appended to the host className property
         * @default ''
         */
        this.theme = '';
        this.registerWidthChange();
    }
    /**
     * @docs-private
     */
    CardComponent.prototype.registerWidthChange = function () {
        var _this = this;
        var widthChange = function (width) {
            if (width) {
                _this._render.setStyle(_this._el.nativeElement, 'width', width + "px");
            }
        };
        this.widthChange.subscribe(widthChange);
    };
    CardComponent.prototype.ngOnInit = function () { };
    /**
     * @docs-private
     */
    CardComponent.prototype.onDispose = function () {
        this.dispose.emit(this);
        var el = this._el.nativeElement;
        var parentNode = el.parentNode;
        this._render.removeChild(parentNode, el);
    };
    CardComponent.prototype.ngAfterViewInit = function () {
        if (this.theme) {
            addClass(this._el.nativeElement, "nb-card-" + this.theme);
        }
    };
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], CardComponent.prototype, "dispose", void 0);
    tslib_1.__decorate([
        OnChange(),
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], CardComponent.prototype, "width", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], CardComponent.prototype, "disposable", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], CardComponent.prototype, "theme", void 0);
    tslib_1.__decorate([
        ContentChild('title', { static: false }),
        tslib_1.__metadata("design:type", TemplateRef)
    ], CardComponent.prototype, "_title", void 0);
    tslib_1.__decorate([
        ContentChild('operation', { static: false }),
        tslib_1.__metadata("design:type", TemplateRef)
    ], CardComponent.prototype, "_operation", void 0);
    tslib_1.__decorate([
        ContentChild('body', { static: false }),
        tslib_1.__metadata("design:type", TemplateRef)
    ], CardComponent.prototype, "_body", void 0);
    tslib_1.__decorate([
        ContentChild('foot', { static: false }),
        tslib_1.__metadata("design:type", TemplateRef)
    ], CardComponent.prototype, "_foot", void 0);
    CardComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-card',
            template: "<div *ngIf=\"_title\" class=\"nb-card-head\"><h3 class=\"nb-card-head-title\"><ng-template [ngTemplateOutlet]=\"_title\"></ng-template></h3><div class=\"nb-card-head-operation\"><ng-container *ngIf=\"disposable\"><i title=\"Close\" class=\"iconfont icon-close\" (click)=\"onDispose()\"></i></ng-container><ng-template *ngIf=\"!disposable\" [ngTemplateOutlet]=\"_operation\"></ng-template></div></div><div class=\"nb-card-body\"><ng-template [ngTemplateOutlet]=\"_body\"></ng-template></div><div *ngIf=\"_foot\" class=\"nb-card-foot\"><ng-template [ngTemplateOutlet]=\"_foot\"></ng-template></div>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            preserveWhitespaces: false,
            host: {
                'class': 'nb-widget nb-card'
            },
            exportAs: 'nbCard'
        }),
        tslib_1.__metadata("design:paramtypes", [ElementRef, Renderer2])
    ], CardComponent);
    return CardComponent;
}());
export { CardComponent };
//# sourceMappingURL=card.js.map