@hsaadawy/ngx-chat
Version:
58 lines • 7.92 kB
JavaScript
import { Component, EventEmitter, Inject, Input, Output, ViewChild } from "@angular/core";
import { ReplyMessageEvent } from "../../events/reply-message-event";
import { CHAT_SERVICE_TOKEN } from "../../services/chat-service";
export class ChatMessageInputComponent {
constructor(chatService, replyMessageEvent) {
this.chatService = chatService;
this.replyMessageEvent = replyMessageEvent;
this.messageSent = new EventEmitter();
this.message = "";
this.messageItem = "";
debugger;
this.replyMessageEvent.replyMessageEmitter$.subscribe((item) => {
// this.message = item
this.messageItem = item;
});
}
ngOnInit() {
}
onSendMessage($event) {
if ($event) {
$event.preventDefault();
}
if (this.Reply != '') {
this.chatService.sendMessage(this.recipient, `<div class="messageItem">${this.Reply}</div>` + this.message);
this.Reply = '';
}
else {
this.chatService.sendMessage(this.recipient, this.message);
}
this.message = "";
// this.messageSent.emit();
}
focus() {
this.chatInput.nativeElement.focus();
}
delete() {
debugger;
this.Reply = '';
}
}
ChatMessageInputComponent.decorators = [
{ type: Component, args: [{
selector: "ngx-chat-message-input",
template: "<div *ngIf=\"Reply!=''\" style=\" background: #8e89896b;\r\ncolor: #fff;\r\nposition: relative;\r\ntop: -9px;\r\nwidth: 105%;\r\nleft: -3%;\r\npadding: 4px 6px;\r\nborder-radius: 4px 4px 0 0;\">\r\n\r\n <div [innerHTML]=\"Reply\"></div>\r\n <i class=\"fas fa-times\" style=\"font-family: 'Font Awesome 5 Pro' !important;float: right;padding: 0 5px; position: absolute;\r\n right: 0;\r\n top: 4px;\" (click)=\"delete()\" aria-hidden=\"true\"></i>\r\n\r\n</div>\r\n\r\n<textarea class=\"chat-input\" #chatInput [(ngModel)]=\"message\" (keydown.enter)=\"onSendMessage($event)\"\r\n cdkTextareaAutosize cdkAutosizeMinRows=\"1\" cdkAutosizeMaxRows=\"5\"\r\n placeholder=\"{{chatService.translations.placeholder}}\"></textarea>\r\n",
styles: ["@keyframes ngx-chat-message-in{0%{transform:translate(50px);opacity:0}to{transform:none;opacity:1}}@keyframes ngx-chat-message-out{0%{transform:translate(-50px);opacity:0}to{transform:none;opacity:1}}.messageItem{background-color:red;width:100%;border-radius:2px}*{box-sizing:border-box;margin:0;padding:0;font-family:\"Helvetica\",\"Arial\",serif}.chat-input{border:none;width:100%;font-size:1em;padding:0;display:block;resize:none;overflow-x:hidden;outline:none}\n"]
},] }
];
ChatMessageInputComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [CHAT_SERVICE_TOKEN,] }] },
{ type: ReplyMessageEvent, decorators: [{ type: Inject, args: [ReplyMessageEvent,] }] }
];
ChatMessageInputComponent.propDecorators = {
recipient: [{ type: Input }],
Reply: [{ type: Input }],
messageSent: [{ type: Output }],
chatInput: [{ type: ViewChild, args: ["chatInput",] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1tZXNzYWdlLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3BhenpuZXR3b3JrL25neC1jaGF0L3NyYy9saWIvY29tcG9uZW50cy9jaGF0LW1lc3NhZ2UtaW5wdXQvY2hhdC1tZXNzYWdlLWlucHV0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULFlBQVksRUFDWixNQUFNLEVBQ04sS0FBSyxFQUVMLE1BQU0sRUFDTixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLGtCQUFrQixFQUFlLE1BQU0sNkJBQTZCLENBQUM7QUFPOUUsTUFBTSxPQUFPLHlCQUF5QjtJQWVwQyxZQUErQyxXQUF3QixFQUVuQyxpQkFBb0M7UUFGekIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFFbkMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQVhqRSxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFHdkMsWUFBTyxHQUFHLEVBQUUsQ0FBQztRQUNiLGdCQUFXLEdBQUcsRUFBRSxDQUFDO1FBUXRCLFFBQVEsQ0FBQztRQUNULElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxvQkFBb0IsQ0FBQyxTQUFTLENBQUMsQ0FBQyxJQUFZLEVBQUUsRUFBRTtZQUNyRSxzQkFBc0I7WUFDdEIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUE7UUFDekIsQ0FBQyxDQUVBLENBQUE7SUFDSCxDQUFDO0lBRUQsUUFBUTtJQUVSLENBQUM7SUFFRCxhQUFhLENBQUMsTUFBc0I7UUFFbEMsSUFBSSxNQUFNLEVBQUU7WUFDVixNQUFNLENBQUMsY0FBYyxFQUFFLENBQUM7U0FDekI7UUFDRCxJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksRUFBRSxFQUFFO1lBQ3BCLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQ3pDLDZCQUE2QixJQUFJLENBQUMsS0FBSyxRQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQ2xFLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFBO1NBQ2hCO2FBQU07WUFDTCxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUM1RDtRQUVELElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDO1FBQ2xCLDJCQUEyQjtJQUU3QixDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3ZDLENBQUM7SUFDRCxNQUFNO1FBQ0osUUFBUSxDQUFBO1FBQ1IsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUE7SUFDakIsQ0FBQzs7O1lBNURGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsd0JBQXdCO2dCQUNsQyx5dkJBQWtEOzthQUVuRDs7OzRDQWdCYyxNQUFNLFNBQUMsa0JBQWtCO1lBdkIvQixpQkFBaUIsdUJBeUJyQixNQUFNLFNBQUMsaUJBQWlCOzs7d0JBaEIxQixLQUFLO29CQUVMLEtBQUs7MEJBRUwsTUFBTTt3QkFPTixTQUFTLFNBQUMsV0FBVyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIEluamVjdCxcclxuICBJbnB1dCxcclxuICBPbkluaXQsXHJcbiAgT3V0cHV0LFxyXG4gIFZpZXdDaGlsZFxyXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7IFJlY2lwaWVudCB9IGZyb20gXCIuLi8uLi9jb3JlL3JlY2lwaWVudFwiO1xyXG5pbXBvcnQgeyBSZXBseU1lc3NhZ2VFdmVudCB9IGZyb20gXCIuLi8uLi9ldmVudHMvcmVwbHktbWVzc2FnZS1ldmVudFwiO1xyXG5pbXBvcnQgeyBDSEFUX1NFUlZJQ0VfVE9LRU4sIENoYXRTZXJ2aWNlIH0gZnJvbSBcIi4uLy4uL3NlcnZpY2VzL2NoYXQtc2VydmljZVwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IFwibmd4LWNoYXQtbWVzc2FnZS1pbnB1dFwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIi4vY2hhdC1tZXNzYWdlLWlucHV0LmNvbXBvbmVudC5odG1sXCIsXHJcbiAgc3R5bGVVcmxzOiBbXCIuL2NoYXQtbWVzc2FnZS1pbnB1dC5jb21wb25lbnQubGVzc1wiXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIENoYXRNZXNzYWdlSW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpXHJcbiAgcHVibGljIHJlY2lwaWVudDogUmVjaXBpZW50O1xyXG4gIEBJbnB1dCgpXHJcbiAgcHVibGljIFJlcGx5XHJcbiAgQE91dHB1dCgpXHJcbiAgcHVibGljIG1lc3NhZ2VTZW50ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG5cclxuXHJcbiAgcHVibGljIG1lc3NhZ2UgPSBcIlwiO1xyXG4gIHB1YmxpYyBtZXNzYWdlSXRlbSA9IFwiXCI7XHJcblxyXG4gIEBWaWV3Q2hpbGQoXCJjaGF0SW5wdXRcIilcclxuICBjaGF0SW5wdXQ6IEVsZW1lbnRSZWY7XHJcblxyXG4gIGNvbnN0cnVjdG9yKEBJbmplY3QoQ0hBVF9TRVJWSUNFX1RPS0VOKSBwdWJsaWMgY2hhdFNlcnZpY2U6IENoYXRTZXJ2aWNlLFxyXG5cclxuICAgIEBJbmplY3QoUmVwbHlNZXNzYWdlRXZlbnQpIHB1YmxpYyByZXBseU1lc3NhZ2VFdmVudDogUmVwbHlNZXNzYWdlRXZlbnQpIHtcclxuICAgIGRlYnVnZ2VyO1xyXG4gICAgdGhpcy5yZXBseU1lc3NhZ2VFdmVudC5yZXBseU1lc3NhZ2VFbWl0dGVyJC5zdWJzY3JpYmUoKGl0ZW06IHN0cmluZykgPT4ge1xyXG4gICAgICAvLyB0aGlzLm1lc3NhZ2UgPSBpdGVtXHJcbiAgICAgIHRoaXMubWVzc2FnZUl0ZW0gPSBpdGVtXHJcbiAgICB9XHJcblxyXG4gICAgKVxyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcblxyXG4gIH1cclxuXHJcbiAgb25TZW5kTWVzc2FnZSgkZXZlbnQ/OiBLZXlib2FyZEV2ZW50KSB7XHJcblxyXG4gICAgaWYgKCRldmVudCkge1xyXG4gICAgICAkZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuICAgIH1cclxuICAgIGlmICh0aGlzLlJlcGx5ICE9ICcnKSB7XHJcbiAgICAgIHRoaXMuY2hhdFNlcnZpY2Uuc2VuZE1lc3NhZ2UodGhpcy5yZWNpcGllbnQsXHJcbiAgICAgICAgYDxkaXYgIGNsYXNzPVwibWVzc2FnZUl0ZW1cIj4ke3RoaXMuUmVwbHl9PC9kaXY+YCArIHRoaXMubWVzc2FnZSk7XHJcbiAgICAgIHRoaXMuUmVwbHkgPSAnJ1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5jaGF0U2VydmljZS5zZW5kTWVzc2FnZSh0aGlzLnJlY2lwaWVudCwgdGhpcy5tZXNzYWdlKTtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLm1lc3NhZ2UgPSBcIlwiO1xyXG4gICAgLy8gdGhpcy5tZXNzYWdlU2VudC5lbWl0KCk7XHJcblxyXG4gIH1cclxuXHJcbiAgZm9jdXMoKSB7XHJcbiAgICB0aGlzLmNoYXRJbnB1dC5uYXRpdmVFbGVtZW50LmZvY3VzKCk7XHJcbiAgfVxyXG4gIGRlbGV0ZSgpIHtcclxuICAgIGRlYnVnZ2VyXHJcbiAgICB0aGlzLlJlcGx5ID0gJydcclxuICB9XHJcbn1cclxuXHJcbiJdfQ==