import * as i0 from '@angular/core';
import { Component, Input, ElementRef, ViewChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@seniorsistemas/angular-components/locale';
import { LocaleModule } from '@seniorsistemas/angular-components/locale';
import * as i3 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';

class ChatMessageComponent {
    message;
    fileName = null;
    ngOnChanges(changes) {
        if (changes["message"]) {
            this.fileName = this.message.attachmentUrl ? this.getFileNameByUrl(this.message.attachmentUrl) : null;
        }
    }
    getFileNameByUrl(path) {
        const regex = /[^\\/]+$/;
        const match = regex.exec(path);
        return match ? match[0] : null;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatMessageComponent, selector: "s-chat-message", inputs: { message: "message" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chat-message\" [class.chat-message--mine]=\"message.isMine\">\n    <div class=\"chat-message-wrapper\">\n        <div class=\"header\">\n            <img class=\"thumbnail\" [src]=\"message.thumbnailUrl\" alt=\"Thumbnail\" />\n            <span class=\"name\">{{ message.senderName }}</span>\n            <span *ngIf=\"message.sentAt\" class=\"date\">{{ message.sentAt | localizedDate: \"L LTS\" | async }}</span>\n        </div>\n        <p class=\"body\">{{ message.text }}</p>\n\n        <div *ngIf=\"message.attachmentUrl\" class=\"attachment\">\n            <span class=\"attachment-label\">{{ \"platform.angular_components.attachment\" | translate }}:</span>\n            <a class=\"attachment-anchor\" [href]=\"message.attachmentUrl\" [download]=\"fileName\">{{ fileName }}</a>\n        </div>\n    </div>\n</div>\n", styles: [".chat-message{display:flex;justify-content:flex-start;padding:10px 20px}.chat-message .chat-message-wrapper{background-color:#cabbd0;border-radius:16px 16px 16px 0;display:inline-flex;flex-direction:column;max-width:85%;padding:20px}.chat-message .chat-message-wrapper .header{align-items:center;color:#000;display:flex;font-family:Open Sans,sans-serif;gap:8px}.chat-message .chat-message-wrapper .header .thumbnail{border-radius:50%;height:32px;object-fit:cover;object-position:center;width:32px;background-color:#fff}.chat-message .chat-message-wrapper .header .name{font-size:14px;font-weight:700}.chat-message .chat-message-wrapper .header .date{font-size:12px}.chat-message .chat-message-wrapper .body{color:#000;font-family:Open Sans,sans-serif;font-size:12px}.chat-message .chat-message-wrapper .attachment{align-items:center;display:flex;gap:10px;margin-top:12px;-webkit-user-select:none;user-select:none;flex-wrap:wrap}.chat-message .chat-message-wrapper .attachment-label{color:#0e1119;font-family:Open Sans,sans-serif;font-size:12px;font-weight:700}.chat-message .chat-message-wrapper .attachment-anchor{background-color:#fff;border-radius:4px;padding:0 12px;text-decoration:none}.chat-message--mine{justify-content:flex-end}.chat-message--mine .chat-message-wrapper{background-color:#eeebf2;border-radius:16px 16px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatMessageComponent, decorators: [{
            type: Component,
            args: [{ selector: "s-chat-message", template: "<div class=\"chat-message\" [class.chat-message--mine]=\"message.isMine\">\n    <div class=\"chat-message-wrapper\">\n        <div class=\"header\">\n            <img class=\"thumbnail\" [src]=\"message.thumbnailUrl\" alt=\"Thumbnail\" />\n            <span class=\"name\">{{ message.senderName }}</span>\n            <span *ngIf=\"message.sentAt\" class=\"date\">{{ message.sentAt | localizedDate: \"L LTS\" | async }}</span>\n        </div>\n        <p class=\"body\">{{ message.text }}</p>\n\n        <div *ngIf=\"message.attachmentUrl\" class=\"attachment\">\n            <span class=\"attachment-label\">{{ \"platform.angular_components.attachment\" | translate }}:</span>\n            <a class=\"attachment-anchor\" [href]=\"message.attachmentUrl\" [download]=\"fileName\">{{ fileName }}</a>\n        </div>\n    </div>\n</div>\n", styles: [".chat-message{display:flex;justify-content:flex-start;padding:10px 20px}.chat-message .chat-message-wrapper{background-color:#cabbd0;border-radius:16px 16px 16px 0;display:inline-flex;flex-direction:column;max-width:85%;padding:20px}.chat-message .chat-message-wrapper .header{align-items:center;color:#000;display:flex;font-family:Open Sans,sans-serif;gap:8px}.chat-message .chat-message-wrapper .header .thumbnail{border-radius:50%;height:32px;object-fit:cover;object-position:center;width:32px;background-color:#fff}.chat-message .chat-message-wrapper .header .name{font-size:14px;font-weight:700}.chat-message .chat-message-wrapper .header .date{font-size:12px}.chat-message .chat-message-wrapper .body{color:#000;font-family:Open Sans,sans-serif;font-size:12px}.chat-message .chat-message-wrapper .attachment{align-items:center;display:flex;gap:10px;margin-top:12px;-webkit-user-select:none;user-select:none;flex-wrap:wrap}.chat-message .chat-message-wrapper .attachment-label{color:#0e1119;font-family:Open Sans,sans-serif;font-size:12px;font-weight:700}.chat-message .chat-message-wrapper .attachment-anchor{background-color:#fff;border-radius:4px;padding:0 12px;text-decoration:none}.chat-message--mine{justify-content:flex-end}.chat-message--mine .chat-message-wrapper{background-color:#eeebf2;border-radius:16px 16px 0}\n"] }]
        }], propDecorators: { message: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class ChatComponent {
    messages = [];
    messageElements = null;
    ngAfterViewInit() {
        this.scrollToBottom();
        this.messageElements?.changes.subscribe(() => {
            this.scrollToBottom();
        });
    }
    scrollToBottom() {
        this.messageElements?.last?.nativeElement.scrollIntoView({ behavior: "smooth" });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatComponent, selector: "s-chat", inputs: { messages: "messages" }, viewQueries: [{ propertyName: "messageElements", predicate: ["messageElements"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"chat-container\">\n    <s-chat-message #messageElements *ngFor=\"let message of messages\" [message]=\"message\"> </s-chat-message>\n</div>\n", styles: [".chat-container{min-height:500px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChatMessageComponent, selector: "s-chat-message", inputs: ["message"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, decorators: [{
            type: Component,
            args: [{ selector: "s-chat", template: "<div class=\"chat-container\">\n    <s-chat-message #messageElements *ngFor=\"let message of messages\" [message]=\"message\"> </s-chat-message>\n</div>\n", styles: [".chat-container{min-height:500px;overflow:auto}\n"] }]
        }], propDecorators: { messages: [{
                type: Input
            }], messageElements: [{
                type: ViewChildren,
                args: ["messageElements", { read: ElementRef }]
            }] } });

class ChatModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, declarations: [ChatComponent, ChatMessageComponent], imports: [CommonModule, LocaleModule, i3.TranslateModule], exports: [ChatComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, imports: [CommonModule, LocaleModule, TranslateModule.forChild()] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, LocaleModule, TranslateModule.forChild()],
                    declarations: [ChatComponent, ChatMessageComponent],
                    exports: [ChatComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ChatComponent, ChatModule };
//# sourceMappingURL=seniorsistemas-angular-components-chat.mjs.map
