/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, HostListener, Input, Output, } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
/**
 * Chat form component.
 *
 * Show a message form with a send message button.
 *
 * ```ts
 * <el-chat-form showButton="true" buttonIcon="el-send">
 * </el-chat-form>
 * ```
 *
 * When `[dropFiles]="true"` handles files drag&drop with a file preview.
 *
 * Drag & drop available for files and images:
 * @stacked-example(Drag & Drop Chat, chat/chat-drop.component)
 *
 * New message could be tracked outside by using `(send)` output.
 *
 * ```ts
 * <el-chat-form (send)="onNewMessage($event)">
 * </el-chat-form>
 *
 * // ...
 *
 * onNewMessage({ message: string, files: any[] }) {
 *   this.service.sendToServer(message, files);
 * }
 * ```
 */
var ElChatFormComponent = /** @class */ (function () {
    function ElChatFormComponent(cd, domSanitizer) {
        this.cd = cd;
        this.domSanitizer = domSanitizer;
        this.status = '';
        this.inputFocus = false;
        this.inputHover = false;
        this.droppedFiles = [];
        this.imgDropTypes = ['image/png', 'image/jpeg', 'image/gif'];
        /**
         * Predefined message text
         * @type {string}
         */
        this.message = '';
        /**
         * Send button title
         * @type {string}
         */
        this.buttonTitle = '';
        /**
         * Send button icon, shown if `buttonTitle` is empty
         * @type {string}
         */
        this.buttonIcon = 'paper-plane-outline';
        /**
         * Show send button
         * @type {boolean}
         */
        this.showButton = true;
        /**
         * Show send button
         * @type {boolean}
         */
        this.dropFiles = false;
        /**
         *
         * @type {EventEmitter<{ message: string, files: File[] }>}
         */
        this.send = new EventEmitter();
        this.fileOver = false;
    }
    ElChatFormComponent.prototype.onDrop = function (event) {
        var _this = this;
        if (this.dropFiles) {
            event.preventDefault();
            event.stopPropagation();
            this.fileOver = false;
            if (event.dataTransfer && event.dataTransfer.files) {
                var _loop_1 = function (file) {
                    var res = file;
                    if (this_1.imgDropTypes.includes(file.type)) {
                        var fr = new FileReader();
                        fr.onload = function (e) {
                            res.src = e.target.result;
                            res.urlStyle = _this.domSanitizer.bypassSecurityTrustStyle("url(" + res.src + ")");
                            _this.cd.detectChanges();
                        };
                        fr.readAsDataURL(file);
                    }
                    this_1.droppedFiles.push(res);
                };
                var this_1 = this;
                for (var _i = 0, _a = event.dataTransfer.files; _i < _a.length; _i++) {
                    var file = _a[_i];
                    _loop_1(file);
                }
            }
        }
    };
    ElChatFormComponent.prototype.removeFile = function (file) {
        var index = this.droppedFiles.indexOf(file);
        if (index >= 0) {
            this.droppedFiles.splice(index, 1);
        }
    };
    ElChatFormComponent.prototype.onDragOver = function () {
        if (this.dropFiles) {
            this.fileOver = true;
        }
    };
    ElChatFormComponent.prototype.onDragLeave = function () {
        if (this.dropFiles) {
            this.fileOver = false;
        }
    };
    ElChatFormComponent.prototype.sendMessage = function () {
        if (this.droppedFiles.length || String(this.message).trim().length) {
            this.send.emit({ message: this.message, files: this.droppedFiles });
            this.message = '';
            this.droppedFiles = [];
        }
    };
    ElChatFormComponent.prototype.setStatus = function (status) {
        if (this.status !== status) {
            this.status = status;
            this.cd.detectChanges();
        }
    };
    ElChatFormComponent.prototype.getInputStatus = function () {
        if (this.fileOver) {
            return this.status || 'primary';
        }
        if (this.inputFocus || this.inputHover) {
            return this.status;
        }
        return '';
    };
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], ElChatFormComponent.prototype, "message", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], ElChatFormComponent.prototype, "buttonTitle", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], ElChatFormComponent.prototype, "buttonIcon", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Boolean)
    ], ElChatFormComponent.prototype, "showButton", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Boolean)
    ], ElChatFormComponent.prototype, "dropFiles", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], ElChatFormComponent.prototype, "send", void 0);
    __decorate([
        HostBinding('class.file-over'),
        __metadata("design:type", Object)
    ], ElChatFormComponent.prototype, "fileOver", void 0);
    __decorate([
        HostListener('drop', ['$event']),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], ElChatFormComponent.prototype, "onDrop", null);
    __decorate([
        HostListener('dragover'),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], ElChatFormComponent.prototype, "onDragOver", null);
    __decorate([
        HostListener('dragleave'),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], ElChatFormComponent.prototype, "onDragLeave", null);
    ElChatFormComponent = __decorate([
        Component({
            selector: 'el-chat-form',
            template: "\n    <div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n      <ng-container *ngFor=\"let file of droppedFiles\">\n        <div *ngIf=\"file.urlStyle\" [style.background-image]=\"file.urlStyle\">\n          <span class=\"remove\" (click)=\"removeFile(file)\">&times;</span>\n        </div>\n\n        <div>\n          <el-icon *ngIf=\"!file.urlStyle\" icon=\"file-text-outline\" pack=\"endlessjs-essentials\"></el-icon>\n          <span class=\"remove\" (click)=\"removeFile(file)\">&times;</span>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"message-row\">\n      <input elInput\n             fullWidth\n             [status]=\"getInputStatus()\"\n             (focus)=\"inputFocus = true\"\n             (blur)=\"inputFocus = false\"\n             (mouseenter)=\"inputHover = true\"\n             (mouseleave)=\"inputHover = false\"\n             [(ngModel)]=\"message\"\n             [class.with-button]=\"showButton\"\n             type=\"text\"\n             placeholder=\"{{ fileOver ? 'Drop file to send' : 'Type a message' }}\"\n             (keyup.enter)=\"sendMessage()\">\n      <button elButton\n              [status]=\"status || 'primary'\"\n              *ngIf=\"showButton\"\n              [class.with-icon]=\"!buttonTitle\"\n              (click)=\"sendMessage()\"\n              class=\"send-button\">\n        <el-icon *ngIf=\"!buttonTitle; else title\" [icon]=\"buttonIcon\" pack=\"endlessjs-essentials\"></el-icon>\n        <ng-template #title>{{ buttonTitle }}</ng-template>\n      </button>\n    </div>\n  ",
            changeDetection: ChangeDetectionStrategy.OnPush
        }),
        __metadata("design:paramtypes", [ChangeDetectorRef, DomSanitizer])
    ], ElChatFormComponent);
    return ElChatFormComponent;
}());
export { ElChatFormComponent };
//# sourceMappingURL=chat-form.component.js.map