@pazznetwork/ngx-chat/esm2020/lib/components/chat-message-simple/chat-message-simple.component.mjs

[](https://travis-ci.com/pazznetwork/ngx-chat) [](https://coveralls.io/github/pazzn

import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { MessageState } from '../../core/message';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../chat-avatar/chat-avatar.component";
export class ChatMessageSimpleComponent {
    constructor() {
        this.avatarClickHandler = new EventEmitter();
        this.footerHidden = false;
        this.MessageState = MessageState;
    }
}
ChatMessageSimpleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChatMessageSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ChatMessageSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ChatMessageSimpleComponent, selector: "ngx-chat-message-simple", inputs: { avatar: "avatar", avatarInteractive: "avatarInteractive", direction: "direction", formattedDate: "formattedDate", footerHidden: "footerHidden", mediaLink: "mediaLink", isImage: "isImage", isAudio: "isAudio", showImagePlaceholder: "showImagePlaceholder", messageState: "messageState", nick: "nick" }, outputs: { avatarClickHandler: "avatarClickHandler" }, ngImport: i0, template: "<div class=\"chat-message\" [class.chat-message--in]=\"direction === 'in'\" [class.chat-message--out]=\"direction === 'out'\">\n    <div class=\"chat-message-text-wrapper\">\n        <div *ngIf=\"avatar\" class=\"chat-message-avatar\">\n            <ngx-chat-avatar [class.has-click-handler]=\"avatarInteractive\" (click)=\"avatarClickHandler.emit()\"\n                             [imageUrl]=\"avatar\"></ngx-chat-avatar>\n        </div>\n        <div class=\"chat-message-text\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <div class=\"chat-message-image-wrapper\" *ngIf=\"isImage\"\n         [class.chat-message-image-wrapper--placeholder]=\"showImagePlaceholder\">\n        <img class=\"chat-message-image\" (load)=\"showImagePlaceholder = false\" [src]=\"mediaLink\"/>\n    </div>\n    <audio controls *ngIf=\"isAudio\">\n        <source [src]=\"mediaLink\" type=\"audio/mpeg\">\n    </audio>\n    <div class=\"chat-message-footer\" *ngIf=\"!footerHidden\">\n        <small title=\"{{nick}}\" class=\"chat-message-name\">\n            {{nick}}\n            <ng-container *ngIf=\"direction === 'out'\" [ngSwitch]=\"messageState\">\n                <ng-container *ngSwitchCase=\"MessageState.SENT\">\u2713</ng-container>\n                <ng-container *ngSwitchCase=\"MessageState.RECIPIENT_RECEIVED\">\u2713\u2713</ng-container>\n                <ng-container *ngSwitchCase=\"MessageState.RECIPIENT_SEEN\">\n                    <span class=\"state--seen\">\u2713\u2713</span>\n                </ng-container>\n            </ng-container>\n        </small>\n        <small class=\"chat-message-datetime\">{{formattedDate}}</small>\n    </div>\n</div>\n", styles: [".chat-message-avatar{flex-shrink:0;width:2em;height:2em;padding:.5em}.chat-message--in .chat-message-avatar{padding-right:0}.chat-message--out .chat-message-avatar{padding-left:0}.has-click-handler:hover{cursor:pointer}.chat-message-text{min-width:0;padding:.5em;word-break:break-word}.chat-message{border-radius:.5em;margin:.25em}.chat-message--out{background-color:#e6ffd1}.chat-message--in{background-color:#dbedff}.chat-message-text-wrapper{display:flex;flex-direction:row}.chat-message--out .chat-message-text-wrapper{flex-direction:row-reverse}.chat-message-image-wrapper{max-width:100%;max-height:150px;overflow:hidden;height:auto;margin:0 .5em;display:flex;justify-content:center}.chat-message-image-wrapper.chat-message-image-wrapper--placeholder{height:150px}.chat-message-image-wrapper img{object-fit:contain;min-width:0}.chat-message-footer{font-size:.75em;text-align:right;color:#999;padding:0 .5em .5em;clear:both}.chat-message-datetime{display:inline-block;vertical-align:bottom}.chat-message-name{display:inline-block;max-width:9em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:bottom;margin-right:.5em}.state--seen{color:#00c5d2}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.ChatAvatarComponent, selector: "ngx-chat-avatar", inputs: ["imageUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChatMessageSimpleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-chat-message-simple', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chat-message\" [class.chat-message--in]=\"direction === 'in'\" [class.chat-message--out]=\"direction === 'out'\">\n    <div class=\"chat-message-text-wrapper\">\n        <div *ngIf=\"avatar\" class=\"chat-message-avatar\">\n            <ngx-chat-avatar [class.has-click-handler]=\"avatarInteractive\" (click)=\"avatarClickHandler.emit()\"\n                             [imageUrl]=\"avatar\"></ngx-chat-avatar>\n        </div>\n        <div class=\"chat-message-text\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <div class=\"chat-message-image-wrapper\" *ngIf=\"isImage\"\n         [class.chat-message-image-wrapper--placeholder]=\"showImagePlaceholder\">\n        <img class=\"chat-message-image\" (load)=\"showImagePlaceholder = false\" [src]=\"mediaLink\"/>\n    </div>\n    <audio controls *ngIf=\"isAudio\">\n        <source [src]=\"mediaLink\" type=\"audio/mpeg\">\n    </audio>\n    <div class=\"chat-message-footer\" *ngIf=\"!footerHidden\">\n        <small title=\"{{nick}}\" class=\"chat-message-name\">\n            {{nick}}\n            <ng-container *ngIf=\"direction === 'out'\" [ngSwitch]=\"messageState\">\n                <ng-container *ngSwitchCase=\"MessageState.SENT\">\u2713</ng-container>\n                <ng-container *ngSwitchCase=\"MessageState.RECIPIENT_RECEIVED\">\u2713\u2713</ng-container>\n                <ng-container *ngSwitchCase=\"MessageState.RECIPIENT_SEEN\">\n                    <span class=\"state--seen\">\u2713\u2713</span>\n                </ng-container>\n            </ng-container>\n        </small>\n        <small class=\"chat-message-datetime\">{{formattedDate}}</small>\n    </div>\n</div>\n", styles: [".chat-message-avatar{flex-shrink:0;width:2em;height:2em;padding:.5em}.chat-message--in .chat-message-avatar{padding-right:0}.chat-message--out .chat-message-avatar{padding-left:0}.has-click-handler:hover{cursor:pointer}.chat-message-text{min-width:0;padding:.5em;word-break:break-word}.chat-message{border-radius:.5em;margin:.25em}.chat-message--out{background-color:#e6ffd1}.chat-message--in{background-color:#dbedff}.chat-message-text-wrapper{display:flex;flex-direction:row}.chat-message--out .chat-message-text-wrapper{flex-direction:row-reverse}.chat-message-image-wrapper{max-width:100%;max-height:150px;overflow:hidden;height:auto;margin:0 .5em;display:flex;justify-content:center}.chat-message-image-wrapper.chat-message-image-wrapper--placeholder{height:150px}.chat-message-image-wrapper img{object-fit:contain;min-width:0}.chat-message-footer{font-size:.75em;text-align:right;color:#999;padding:0 .5em .5em;clear:both}.chat-message-datetime{display:inline-block;vertical-align:bottom}.chat-message-name{display:inline-block;max-width:9em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:bottom;margin-right:.5em}.state--seen{color:#00c5d2}\n"] }]
        }], propDecorators: { avatar: [{
                type: Input
            }], avatarClickHandler: [{
                type: Output
            }], avatarInteractive: [{
                type: Input
            }], direction: [{
                type: Input
            }], formattedDate: [{
                type: Input
            }], footerHidden: [{
                type: Input
            }], mediaLink: [{
                type: Input
            }], isImage: [{
                type: Input
            }], isAudio: [{
                type: Input
            }], showImagePlaceholder: [{
                type: Input
            }], messageState: [{
                type: Input
            }], nick: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1tZXNzYWdlLXNpbXBsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvY2hhdC1tZXNzYWdlLXNpbXBsZS9jaGF0LW1lc3NhZ2Utc2ltcGxlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9jaGF0LW1lc3NhZ2Utc2ltcGxlL2NoYXQtbWVzc2FnZS1zaW1wbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRyxPQUFPLEVBQWEsWUFBWSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7Ozs7QUFRN0QsTUFBTSxPQUFPLDBCQUEwQjtJQU52QztRQVlJLHVCQUFrQixHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFZOUMsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFvQnJCLGlCQUFZLEdBQUcsWUFBWSxDQUFDO0tBRS9COzt1SEF4Q1ksMEJBQTBCOzJHQUExQiwwQkFBMEIsNGFDVHZDLHNwREErQkE7MkZEdEJhLDBCQUEwQjtrQkFOdEMsU0FBUzsrQkFDSSx5QkFBeUIsbUJBR2xCLHVCQUF1QixDQUFDLE1BQU07OEJBSy9DLE1BQU07c0JBREwsS0FBSztnQkFJTixrQkFBa0I7c0JBRGpCLE1BQU07Z0JBSVAsaUJBQWlCO3NCQURoQixLQUFLO2dCQUlOLFNBQVM7c0JBRFIsS0FBSztnQkFJTixhQUFhO3NCQURaLEtBQUs7Z0JBSU4sWUFBWTtzQkFEWCxLQUFLO2dCQUlOLFNBQVM7c0JBRFIsS0FBSztnQkFJTixPQUFPO3NCQUROLEtBQUs7Z0JBSU4sT0FBTztzQkFETixLQUFLO2dCQUlOLG9CQUFvQjtzQkFEbkIsS0FBSztnQkFJTixZQUFZO3NCQURYLEtBQUs7Z0JBSU4sSUFBSTtzQkFESCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEaXJlY3Rpb24sIE1lc3NhZ2VTdGF0ZSB9IGZyb20gJy4uLy4uL2NvcmUvbWVzc2FnZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmd4LWNoYXQtbWVzc2FnZS1zaW1wbGUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9jaGF0LW1lc3NhZ2Utc2ltcGxlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9jaGF0LW1lc3NhZ2Utc2ltcGxlLmNvbXBvbmVudC5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgQ2hhdE1lc3NhZ2VTaW1wbGVDb21wb25lbnQge1xuXG4gICAgQElucHV0KClcbiAgICBhdmF0YXI/OiBzdHJpbmc7XG5cbiAgICBAT3V0cHV0KClcbiAgICBhdmF0YXJDbGlja0hhbmRsZXIgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgICBASW5wdXQoKVxuICAgIGF2YXRhckludGVyYWN0aXZlOiBib29sZWFuO1xuXG4gICAgQElucHV0KClcbiAgICBkaXJlY3Rpb246IERpcmVjdGlvbjtcblxuICAgIEBJbnB1dCgpXG4gICAgZm9ybWF0dGVkRGF0ZTogc3RyaW5nO1xuXG4gICAgQElucHV0KClcbiAgICBmb290ZXJIaWRkZW4gPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpXG4gICAgbWVkaWFMaW5rOiBzdHJpbmc7XG5cbiAgICBASW5wdXQoKVxuICAgIGlzSW1hZ2U6IGJvb2xlYW47XG5cbiAgICBASW5wdXQoKVxuICAgIGlzQXVkaW86IGJvb2xlYW47XG5cbiAgICBASW5wdXQoKVxuICAgIHNob3dJbWFnZVBsYWNlaG9sZGVyOiBib29sZWFuO1xuXG4gICAgQElucHV0KClcbiAgICBtZXNzYWdlU3RhdGU6IE1lc3NhZ2VTdGF0ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgbmljaz86IHN0cmluZztcblxuICAgIE1lc3NhZ2VTdGF0ZSA9IE1lc3NhZ2VTdGF0ZTtcblxufVxuIiwiPGRpdiBjbGFzcz1cImNoYXQtbWVzc2FnZVwiIFtjbGFzcy5jaGF0LW1lc3NhZ2UtLWluXT1cImRpcmVjdGlvbiA9PT0gJ2luJ1wiIFtjbGFzcy5jaGF0LW1lc3NhZ2UtLW91dF09XCJkaXJlY3Rpb24gPT09ICdvdXQnXCI+XG4gICAgPGRpdiBjbGFzcz1cImNoYXQtbWVzc2FnZS10ZXh0LXdyYXBwZXJcIj5cbiAgICAgICAgPGRpdiAqbmdJZj1cImF2YXRhclwiIGNsYXNzPVwiY2hhdC1tZXNzYWdlLWF2YXRhclwiPlxuICAgICAgICAgICAgPG5neC1jaGF0LWF2YXRhciBbY2xhc3MuaGFzLWNsaWNrLWhhbmRsZXJdPVwiYXZhdGFySW50ZXJhY3RpdmVcIiAoY2xpY2spPVwiYXZhdGFyQ2xpY2tIYW5kbGVyLmVtaXQoKVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpbWFnZVVybF09XCJhdmF0YXJcIj48L25neC1jaGF0LWF2YXRhcj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjaGF0LW1lc3NhZ2UtdGV4dFwiPlxuICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiY2hhdC1tZXNzYWdlLWltYWdlLXdyYXBwZXJcIiAqbmdJZj1cImlzSW1hZ2VcIlxuICAgICAgICAgW2NsYXNzLmNoYXQtbWVzc2FnZS1pbWFnZS13cmFwcGVyLS1wbGFjZWhvbGRlcl09XCJzaG93SW1hZ2VQbGFjZWhvbGRlclwiPlxuICAgICAgICA8aW1nIGNsYXNzPVwiY2hhdC1tZXNzYWdlLWltYWdlXCIgKGxvYWQpPVwic2hvd0ltYWdlUGxhY2Vob2xkZXIgPSBmYWxzZVwiIFtzcmNdPVwibWVkaWFMaW5rXCIvPlxuICAgIDwvZGl2PlxuICAgIDxhdWRpbyBjb250cm9scyAqbmdJZj1cImlzQXVkaW9cIj5cbiAgICAgICAgPHNvdXJjZSBbc3JjXT1cIm1lZGlhTGlua1wiIHR5cGU9XCJhdWRpby9tcGVnXCI+XG4gICAgPC9hdWRpbz5cbiAgICA8ZGl2IGNsYXNzPVwiY2hhdC1tZXNzYWdlLWZvb3RlclwiICpuZ0lmPVwiIWZvb3RlckhpZGRlblwiPlxuICAgICAgICA8c21hbGwgdGl0bGU9XCJ7e25pY2t9fVwiIGNsYXNzPVwiY2hhdC1tZXNzYWdlLW5hbWVcIj5cbiAgICAgICAgICAgIHt7bmlja319XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZGlyZWN0aW9uID09PSAnb3V0J1wiIFtuZ1N3aXRjaF09XCJtZXNzYWdlU3RhdGVcIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCJNZXNzYWdlU3RhdGUuU0VOVFwiPuKckzwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIk1lc3NhZ2VTdGF0ZS5SRUNJUElFTlRfUkVDRUlWRURcIj7inJPinJM8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCJNZXNzYWdlU3RhdGUuUkVDSVBJRU5UX1NFRU5cIj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJzdGF0ZS0tc2VlblwiPuKck+Kckzwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L3NtYWxsPlxuICAgICAgICA8c21hbGwgY2xhc3M9XCJjaGF0LW1lc3NhZ2UtZGF0ZXRpbWVcIj57e2Zvcm1hdHRlZERhdGV9fTwvc21hbGw+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==