import { Component, ViewEncapsulation, Renderer2, ElementRef, Input, ViewChild } from '@angular/core';
var NzAvatarComponent = (function () {
    function NzAvatarComponent(_elementRef, _renderer) {
        this._elementRef = _elementRef;
        this._renderer = _renderer;
        this._prefixCls = 'ant-avatar';
        this._classList = [];
        this._sizeMap = { large: 'lg', small: 'sm' };
        this._hasText = false;
        this._isSrcExist = true;
        this._hasIcon = false;
        this.nzShape = 'circle';
        this.nzSize = 'default';
        this._el = _elementRef.nativeElement;
        this._renderer.addClass(this._el, this._prefixCls);
    }
    NzAvatarComponent.prototype._setClassMap = function () {
        var _this = this;
        this._classList.forEach(function (_className) {
            _this._renderer.removeClass(_this._el, _className);
        });
        this._classList = [
            this._sizeMap[this.nzSize] && this._prefixCls + "-" + this._sizeMap[this.nzSize],
            this.nzShape && this._prefixCls + "-" + this.nzShape,
            this.nzIcon && this._prefixCls + "-icon",
            this.nzSrc && this._prefixCls + "-image"
        ].filter(function (item) {
            return !!item;
        });
        this._classList.forEach(function (_className) {
            _this._renderer.addClass(_this._el, _className);
        });
        return this;
    };
    NzAvatarComponent.prototype._imgError = function () {
        this._isSrcExist = false;
        // TODO(i): need force remove [nzSrc] if broken image?
        this._hasIcon = false;
        this._hasText = false;
        if (this.nzIcon) {
            this._hasIcon = true;
        }
        else if (this.nzText) {
            this._hasText = true;
        }
        this._setClassMap()._notifyCalc();
    };
    NzAvatarComponent.prototype._calcStringSize = function () {
        if (!this._hasText)
            return;
        var el = this._textEl && this._textEl.nativeElement;
        if (!el)
            return;
        var childrenWidth = el.offsetWidth;
        var avatarWidth = this._el.getBoundingClientRect().width;
        var scale = avatarWidth - 8 < childrenWidth ? (avatarWidth - 8) / childrenWidth : 1;
        if (scale === 1) {
            this._textStyles = {};
        }
        else {
            this._textStyles = {
                transform: "scale(" + scale + ")",
                position: 'absolute',
                display: 'inline-block',
                left: "calc(50% - " + Math.round(childrenWidth / 2) + "px)"
            };
        }
    };
    NzAvatarComponent.prototype._notifyCalc = function () {
        var _this = this;
        // If use ngAfterViewChecked, always demands more computations, so......
        setTimeout(function () {
            _this._calcStringSize();
        });
        return this;
    };
    NzAvatarComponent.prototype.ngOnChanges = function (changes) {
        this._hasText = !this.nzSrc && !!this.nzText;
        this._hasIcon = !this.nzSrc && !!this.nzIcon;
        this._setClassMap()._notifyCalc();
    };
    return NzAvatarComponent;
}());
export { NzAvatarComponent };
NzAvatarComponent.decorators = [
    { type: Component, args: [{
                selector: 'nz-avatar',
                encapsulation: ViewEncapsulation.None,
                template: "\n  <i class=\"anticon anticon-{{nzIcon}}\" *ngIf=\"nzIcon && _hasIcon\"></i>\n  <img [src]=\"nzSrc\" *ngIf=\"nzSrc && _isSrcExist\" (error)=\"_imgError($event)\"/>\n  <span class=\"ant-avatar-string\" #textEl [ngStyle]=\"_textStyles\" *ngIf=\"nzText && _hasText\">{{nzText}}</span>\n  ",
                styles: [
                    "/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\n/* stylelint-disable declaration-bang-space-before */\n/* stylelint-disable declaration-bang-space-before */\n.ant-avatar {\n  display: inline-block;\n  text-align: center;\n  background: #ccc;\n  color: #fff;\n  white-space: nowrap;\n  position: relative;\n  overflow: hidden;\n  width: 32px;\n  height: 32px;\n  line-height: 32px;\n  border-radius: 16px;\n}\n.ant-avatar > * {\n  line-height: 32px;\n}\n.ant-avatar.ant-avatar-icon {\n  font-size: 18px;\n}\n.ant-avatar-lg {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 20px;\n}\n.ant-avatar-lg > * {\n  line-height: 40px;\n}\n.ant-avatar-lg.ant-avatar-icon {\n  font-size: 24px;\n}\n.ant-avatar-sm {\n  width: 24px;\n  height: 24px;\n  line-height: 24px;\n  border-radius: 12px;\n}\n.ant-avatar-sm > * {\n  line-height: 24px;\n}\n.ant-avatar-sm.ant-avatar-icon {\n  font-size: 14px;\n}\n.ant-avatar-square {\n  border-radius: 4px;\n}\n.ant-avatar > img {\n  width: 100%;\n  height: 100%;\n}\n",
                    ""
                ]
            },] },
];
/** @nocollapse */
NzAvatarComponent.ctorParameters = function () { return [
    { type: ElementRef, },
    { type: Renderer2, },
]; };
NzAvatarComponent.propDecorators = {
    '_textEl': [{ type: ViewChild, args: ['textEl',] },],
    'nzShape': [{ type: Input },],
    'nzSize': [{ type: Input },],
    'nzText': [{ type: Input },],
    'nzSrc': [{ type: Input },],
    'nzIcon': [{ type: Input },],
};
