/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, EventEmitter, Input, Output } from '@angular/core';
var ProfileComponent = /** @class */ (function () {
    function ProfileComponent() {
        this.avatarSelectorOpen = false;
        this.achievementsOpen = false;
        this.configurationOpen = false;
        this.userFileOpen = false;
        this.profileMenu = [
            {
                name: 'Configuracion',
                icon: 'icon-ticmas-icon-config',
                href: '#icon-ticmas-icon-config'
            }
        ];
        this.saveImg = new EventEmitter();
        this.editPro = false;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    ProfileComponent.prototype.searchImg = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        var _this = this;
        if (event.target.files && event.target.files[0]) {
            /** @type {?} */
            var reader = new FileReader();
            reader.onload = function (_a) {
                var target = _a.target;
                _this.avatar = ((/** @type {?} */ (target))).result.toString();
            };
            reader.readAsDataURL(event.target.files[0]);
            this.objImg = event.target.files[0];
        }
    };
    /**
     * @return {?}
     */
    ProfileComponent.prototype.editProfile = /**
     * @return {?}
     */
    function () {
        this.editPro = true;
    };
    /**
     * @return {?}
     */
    ProfileComponent.prototype.saveProfile = /**
     * @return {?}
     */
    function () {
        this.editPro = false;
        this.saveImg.emit(this.objImg);
    };
    /**
     * @return {?}
     */
    ProfileComponent.prototype.openAvatarSelector = /**
     * @return {?}
     */
    function () {
        this.avatarSelectorOpen = true;
    };
    /**
     * @param {?} state
     * @return {?}
     */
    ProfileComponent.prototype.closeAvatarSelector = /**
     * @param {?} state
     * @return {?}
     */
    function (state) {
        this.avatarSelectorOpen = state;
    };
    /**
     * @param {?} panel
     * @return {?}
     */
    ProfileComponent.prototype.openMenuPanel = /**
     * @param {?} panel
     * @return {?}
     */
    function (panel) {
        if (panel === 'Configuracion') {
            this.configurationOpen = true;
        }
    };
    /**
     * @param {?} event
     * @return {?}
     */
    ProfileComponent.prototype.closePanel = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        if (event.panel === 'Configuracion') {
            this.configurationOpen = event.state;
        }
    };
    ProfileComponent.decorators = [
        { type: Component, args: [{
                    selector: 'bidi-profile',
                    template: "<div class=\"profile is-flex is-space-between has-column-direction\">\n    <bidi-avatar-selector [ngClass]=\"{'open': avatarSelectorOpen}\" (selectorState)=\"closeAvatarSelector($event)\" class=\"has-background-tt-secondary\">\n    </bidi-avatar-selector>\n    <bidi-achievements [ngClass]=\"{'open': achievementsOpen}\" (panelState)=\"closePanel($event)\" class=\"has-background-tt-secondary\"></bidi-achievements>\n    <bidi-configuration [ngClass]=\"{'open': configurationOpen}\" (panelState)=\"closePanel($event)\" class=\"has-background-tt-secondary\"></bidi-configuration>\n    <bidi-user-file [ngClass]=\"{'open': userFileOpen}\" (panelState)=\"closePanel($event)\" class=\"has-background-tt-secondary\">\n    </bidi-user-file>\n\n    <div class=\"user-container\" *ngIf=\"user\">\n        <p class=\"has-text-light is-uppercase is-size-6\" style=\"margin-bottom: 35px;border-radius: 0; border-left: none; border-top: none;\">\n            Perfil de usuario\n        </p>\n        <div class=\"avatar-container is-relative\">\n            <input style=\"display:none;\" type=\"file\" (change)=\"searchImg($event)\" #photoInput>\n            <button class=\"button edit-button\" (click)=\"openAvatarSelector()\">\n                <svg class=\"icon-bidi-pencil icon is-small has-text-black-bis\">\n                    <use xlink:href=\"#icon-bidi-pencil\"></use>\n                </svg>\n            </button>\n            <div class=\"avatar-img-container\">\n                <img src=\"{{ avatar }}\">\n                <!--\n                <svg class=\"icon-tt-new-profile-1 icon has-text-grey\">\n                    <use xlink:href=\"#icon-tt-new-profile-1\"></use>\n                </svg>\n                -->\n            </div>\n        </div>\n        <div class=\"data-container has-text-white\">\n            <p class=\"has-text-light is-size-6\" style=\"    margin-top: -6px;\">{{user.name}}</p>\n            <p class=\"is-size-8\">{{user.email}}</p>\n            <div class=\"buttons\">\n                <button *ngIf=\"!editPro; else savePro\" \n                (click)=\"editProfile();photoInput.click()\" \n                class=\"button is-outlined is-tt is-size-7\" style=\"width: 83px;\n                min-width: inherit;\n                padding: 4px;\n                margin-top: 4px;\">\n                    Editar\n                </button>\n                <ng-template #savePro>\n                    <button (click)=\"saveProfile()\" \n                    class=\"button is-outlined is-tt is-size-7\" \n                    style=\"width: 83px;\n                    min-width: inherit;\n                    padding: 4px;\n                    margin-top: 4px;\">\n                        Guardar\n                    </button>\n                </ng-template>\n            </div>\n        </div>\n    </div>\n    <bidi-sign-out></bidi-sign-out>\n</div>\n",
                    styles: [".profile{background:rgba(30,54,72,.95);width:230px;height:100%;padding:25px;position:relative;overflow:hidden}.profile .title{letter-spacing:9px}.profile .user-container .edit-button{background-color:transparent;top:3px;width:40px;height:40px;font-size:.8em;border:none;outline:0;position:absolute;right:0;bottom:1px;min-width:inherit;display:none}.profile .user-container .edit-button svg{height:1.2em;width:1.2em}.profile .user-container .edit-button:focus{outline:0!important}.profile .user-container .avatar-container{padding-top:5px;padding-bottom:5px;padding-right:2px}.profile .user-container .avatar-container button{width:25px;height:25px;border-radius:99999px;background:#00f699;opacity:.7}.profile .user-container .avatar-container .avatar-img-container{border-radius:50%;width:50px;height:50px;background:#e5e5e5;position:relative;overflow:hidden;margin:0 auto;float:left}.profile .user-container .avatar-container .avatar-img-container svg{margin:13px auto 0 -1px;height:3em;width:3.4em}.profile .user-container .data-container{padding-top:0;padding-bottom:10px;padding-left:10px;text-align:center;float:left}.profile .user-container .data-container p{line-height:1.22}.profile .user-container .data-container .is-size-8{font-size:.6rem}.profile .user-container .data-container .is-size-9{font-size:.55rem}.profile .user-container .info-container{padding-top:25px;clear:both;margin-left:7px}.profile .user-container .info-container ul{margin-top:10px}.profile .user-container .info-container ul li{line-height:1.8rem}.profile .user-container .info-container ul li span.profile-bullet-point{float:left;width:46px;height:20px;border-bottom:1px solid #00f59c;margin-right:3px}.profile bidi-avatar-selector{position:absolute;top:-100%;left:0;right:0;min-height:80px;z-index:10;transition:.25s}.profile bidi-avatar-selector.open{top:0}.profile bidi-achievements,.profile bidi-configuration,.profile bidi-user-file{position:absolute;top:0;bottom:0;left:-100%;width:100%;z-index:15;transition:.25s}.profile bidi-achievements.open,.profile bidi-configuration.open,.profile bidi-user-file.open{left:0}"]
                }] }
    ];
    ProfileComponent.propDecorators = {
        saveImg: [{ type: Output }],
        user: [{ type: Input }],
        avatar: [{ type: Input }]
    };
    return ProfileComponent;
}());
export { ProfileComponent };
if (false) {
    /** @type {?} */
    ProfileComponent.prototype.avatarSelectorOpen;
    /** @type {?} */
    ProfileComponent.prototype.achievementsOpen;
    /** @type {?} */
    ProfileComponent.prototype.configurationOpen;
    /** @type {?} */
    ProfileComponent.prototype.userFileOpen;
    /** @type {?} */
    ProfileComponent.prototype.profileMenu;
    /** @type {?} */
    ProfileComponent.prototype.saveImg;
    /** @type {?} */
    ProfileComponent.prototype.user;
    /** @type {?} */
    ProfileComponent.prototype.avatar;
    /** @type {?} */
    ProfileComponent.prototype.objImg;
    /** @type {?} */
    ProfileComponent.prototype.editPro;
}
//# sourceMappingURL=data:application/json;base64, 