cax-design-system 2.8.5 → 3.0.1

package/fesm2022/cax-design-system-comments.mjs

@@ -0,0 +1,385 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Avatar } from 'cax-design-system/avatar';
+import * as i2 from 'cax-design-system/button';
+import { ButtonModule } from 'cax-design-system/button';
+import * as i4 from 'cax-design-system/editor';
+import { EditorModule } from 'cax-design-system/editor';
+import * as i6 from 'cax-design-system/overlaypanel';
+import { OverlayPanelModule } from 'cax-design-system/overlaypanel';
+import { ListboxModule } from 'cax-design-system/listbox';
+import * as i3 from 'cax-design-system/api';
+import { SharedModule } from 'cax-design-system/api';
+import { ChipModule } from 'cax-design-system/chip';
+
+class CommentsComponent {
+    cdr;
+    scrollContainer;
+    suggestionOverlay;
+    visibilityObserver;
+    _comments = [];
+    groupedComments = [];
+    isRichText = false;
+    commentValue = '';
+    // Suggestion state
+    isSuggestionVisible = false;
+    suggestionType = null;
+    filteredSuggestions = [];
+    triggerIndex = -1;
+    attachedFiles = [];
+    lastBounds = null;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        this.scrollToBottom();
+        this.setupVisibilityObserver();
+    }
+    ngOnDestroy() {
+        if (this.visibilityObserver) {
+            this.visibilityObserver.disconnect();
+        }
+    }
+    set comments(value) {
+        this._comments = value || [];
+        this.recomputeGroups();
+        this.scrollToBottom();
+    }
+    get comments() {
+        return this._comments;
+    }
+    commentPlaceholder = 'Add your comments here...';
+    _mentionSuggestions = [];
+    _hashTagSuggestions = [];
+    set mentionSuggestions(value) {
+        this._mentionSuggestions = value || [];
+        this.recomputeGroups();
+    }
+    get mentionSuggestions() {
+        return this._mentionSuggestions;
+    }
+    set hashTagSuggestions(value) {
+        this._hashTagSuggestions = value || [];
+        this.recomputeGroups();
+    }
+    get hashTagSuggestions() {
+        return this._hashTagSuggestions;
+    }
+    acceptedFiles = [];
+    get acceptFileTypes() {
+        if (!this.acceptedFiles || this.acceptedFiles.length === 0)
+            return '';
+        return this.acceptedFiles.map((type) => (type.startsWith('.') ? type : `.${type}`)).join(',');
+    }
+    onSendComment = new EventEmitter();
+    onFileSelect = new EventEmitter();
+    onDownloadFile = new EventEmitter();
+    editor;
+    recomputeGroups() {
+        const groups = this._comments.reduce((acc, comment) => {
+            const date = new Date(comment.timestamp);
+            const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+            let group = acc.find((g) => g.date.getTime() === dateOnly.getTime());
+            if (!group) {
+                group = { date: dateOnly, comments: [] };
+                acc.push(group);
+            }
+            group.comments.push(comment);
+            return acc;
+        }, []);
+        groups.sort((a, b) => a.date.getTime() - b.date.getTime());
+        groups.forEach((group) => {
+            group.comments.forEach((comment) => {
+                comment.message = this.enrichMessage(comment.message);
+            });
+            group.comments.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
+        });
+        this.groupedComments = groups;
+    }
+    enrichMessage(message) {
+        if (!message)
+            return '';
+        let processedMessage = message;
+        // Replace empty paragraphs with line breaks for cleaner spacing
+        processedMessage = processedMessage.replace(/<p><br><\/p>/g, '<br/>');
+        processedMessage = processedMessage.replace(/<p><\/p>/g, '<br/>');
+        processedMessage = processedMessage.replace(/<p>&nbsp;<\/p>/g, '<br/>');
+        // Extract and validate mentions
+        this._mentionSuggestions?.forEach((suggestion) => {
+            const username = suggestion.userName;
+            // Only wrap if not already wrapped in the mention span
+            // This regex checks for @username NOT preceded by the mention span start tag
+            const regex = new RegExp(`(?<!class="cax-comment-mention">)@${username}\\b`, 'g');
+            processedMessage = processedMessage.replace(regex, `<span class="cax-comment-mention">@${username}</span>`);
+        });
+        // Extract and validate hashtags
+        this._hashTagSuggestions?.forEach((tag) => {
+            // Only wrap if not already wrapped in the hashtag span
+            const regex = new RegExp(`(?<!class="cax-comment-hashtag">)#${tag}\\b`, 'g');
+            processedMessage = processedMessage.replace(regex, `<span class="cax-comment-hashtag">#${tag}</span>`);
+        });
+        // Trim trailing empty paragraphs or line breaks
+        processedMessage = processedMessage.replace(/(<p><br><\/p>|<p><\/p>|<br\s*\/?>)+$/, '');
+        return processedMessage;
+    }
+    getInitials(author) {
+        if (!author)
+            return '?';
+        return ((author.firstName?.[0] || '') + (author.lastName?.[0] || '')).toUpperCase();
+    }
+    isLastInGroup(groupComments, index) {
+        const current = groupComments[index];
+        const next = groupComments[index + 1];
+        if (current.currentUser)
+            return false;
+        if (!next)
+            return true;
+        const currentAuthor = `${current.author?.firstName} ${current.author?.lastName}`;
+        const nextAuthor = `${next.author?.firstName} ${next.author?.lastName}`;
+        return next.currentUser || currentAuthor !== nextAuthor;
+    }
+    isConsecutive(groupComments, index) {
+        if (index === 0)
+            return false;
+        const current = groupComments[index];
+        const prev = groupComments[index - 1];
+        const currentAuthor = `${current.author?.firstName} ${current.author?.lastName}`;
+        const prevAuthor = `${prev.author?.firstName} ${prev.author?.lastName}`;
+        return current.currentUser === prev.currentUser && currentAuthor === prevAuthor;
+    }
+    toggleRichText() {
+        this.isRichText = !this.isRichText;
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.attachedFiles.push(...Array.from(input.files));
+            this.onFileSelect.emit(this.attachedFiles);
+        }
+        if (input) {
+            input.value = '';
+        }
+    }
+    removeAttachedFile(index) {
+        this.attachedFiles.splice(index, 1);
+        this.onFileSelect.emit(this.attachedFiles);
+    }
+    onSendMessage() {
+        if (this.commentValue || this.attachedFiles.length > 0) {
+            const processedMessage = this.enrichMessage(this.commentValue);
+            this.onSendComment.emit({
+                message: processedMessage,
+                attachments: [...this.attachedFiles]
+            });
+            this.commentValue = '';
+            this.attachedFiles = [];
+            this.hideSuggestions();
+            this.scrollToBottom();
+        }
+    }
+    onDownload(file) {
+        this.onDownloadFile.emit(file);
+    }
+    // Suggestion implementation
+    showSuggestions(type, index, bounds) {
+        this.suggestionType = type;
+        this.triggerIndex = index;
+        this.lastBounds = bounds;
+        this.filterSuggestions('');
+        const target = this.editor?.el.nativeElement.querySelector('.cax-editor-content');
+        if (!target)
+            return;
+        this.suggestionOverlay.show(null, target);
+        this.updateOverlayPosition();
+    }
+    updateOverlayPosition() {
+        setTimeout(() => {
+            const panel = this.suggestionOverlay.container;
+            const target = this.editor?.el.nativeElement.querySelector('.cax-editor-content');
+            if (panel && this.lastBounds && target) {
+                const panelHeight = panel.offsetHeight;
+                const rect = target.getBoundingClientRect();
+                panel.style.position = 'fixed';
+                panel.style.zIndex = '9999';
+                panel.style.left = `${rect.left + this.lastBounds.left}px`;
+                panel.style.top = `${rect.top + this.lastBounds.top - panelHeight - 10}px`;
+                this.cdr.detectChanges();
+            }
+        }, 0);
+    }
+    hideSuggestions() {
+        if (this.suggestionType === null)
+            return;
+        this.suggestionOverlay?.hide();
+        this.suggestionType = null;
+        this.filteredSuggestions = [];
+        this.triggerIndex = -1;
+        this.cdr.detectChanges();
+    }
+    onEditorTextChange(event) {
+        const quill = this.editor.getQuill();
+        if (!quill)
+            return;
+        // 20ms delay to ensure Quill and DOM are synchronized
+        setTimeout(() => {
+            const range = quill.getSelection();
+            if (!range)
+                return;
+            const text = quill.getText(0, range.index);
+            const token = this.getTokenAtCursor(text, range.index);
+            if (token) {
+                const type = token.charAt(0);
+                const hasSuggestions = type === '@' ? this.mentionSuggestions?.length > 0 : this.hashTagSuggestions?.length > 0;
+                if (hasSuggestions) {
+                    // If trigger type changed while open, reset first
+                    if (this.suggestionType && this.suggestionType !== type) {
+                        this.hideSuggestions();
+                    }
+                    if (!this.suggestionType) {
+                        const bounds = quill.getBounds(range.index);
+                        this.showSuggestions(type, range.index, bounds);
+                    }
+                    else {
+                        this.filterSuggestions(token.slice(1));
+                        this.updateOverlayPosition();
+                    }
+                }
+                else if (this.suggestionType) {
+                    this.hideSuggestions();
+                }
+            }
+            else if (this.suggestionType) {
+                this.hideSuggestions();
+            }
+        }, 20);
+    }
+    filterSuggestions(searchTerm) {
+        const term = searchTerm.toLowerCase();
+        // Fast-path: if search term is empty, just return the full list
+        if (term === '') {
+            this.filteredSuggestions = this.suggestionType === '@' ? [...this._mentionSuggestions] : [...this._hashTagSuggestions];
+        }
+        else if (this.suggestionType === '@') {
+            this.filteredSuggestions = this._mentionSuggestions?.filter((s) => s.firstName.toLowerCase().includes(term) || s.lastName.toLowerCase().includes(term) || s.userName.toLowerCase().includes(term));
+        }
+        else {
+            this.filteredSuggestions = this._hashTagSuggestions?.filter((s) => s.toLowerCase().includes(term));
+        }
+        if (this.filteredSuggestions.length === 0 && searchTerm !== '') {
+            this.hideSuggestions();
+        }
+        this.cdr.detectChanges();
+    }
+    onSuggestionSelect(item) {
+        const selectedValue = this.suggestionType === '@' ? `@${item.userName}` : `#${item}`;
+        const quill = this.editor.getQuill();
+        const range = quill.getSelection();
+        if (range) {
+            const textBefore = quill.getText(0, range.index);
+            const token = this.getTokenAtCursor(textBefore, range.index);
+            const start = range.index - (token ? token.length : 0);
+            quill.deleteText(start, token ? token.length : 0);
+            quill.insertText(start, selectedValue + ' ');
+            quill.setSelection(start + selectedValue.length + 1);
+            quill.focus();
+        }
+        this.hideSuggestions();
+    }
+    getTokenAtCursor(text, cursorPos) {
+        const beforeCursor = text.slice(0, cursorPos);
+        const match = beforeCursor.match(/[@#][^\s]*$/);
+        return match ? match[0] : null;
+    }
+    onEditorKeyDown(event) {
+        if (!this.isRichText && event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.onSendMessage();
+        }
+    }
+    formatBytes(bytes, decimals = 2) {
+        if (!+bytes)
+            return '0 Bytes';
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+    }
+    scrollToBottom() {
+        setTimeout(() => {
+            if (this.scrollContainer) {
+                const element = this.scrollContainer.nativeElement;
+                element.scrollTop = element.scrollHeight;
+                this.cdr.detectChanges();
+            }
+        }, 100);
+    }
+    setupVisibilityObserver() {
+        if (typeof IntersectionObserver !== 'undefined' && this.scrollContainer) {
+            this.visibilityObserver = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        this.scrollToBottom();
+                    }
+                });
+            });
+            this.visibilityObserver.observe(this.scrollContainer.nativeElement);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CommentsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CommentsComponent, isStandalone: true, selector: "cax-comments", inputs: { comments: "comments", commentPlaceholder: "commentPlaceholder", mentionSuggestions: "mentionSuggestions", hashTagSuggestions: "hashTagSuggestions", acceptedFiles: "acceptedFiles" }, outputs: { onSendComment: "onSendComment", onFileSelect: "onFileSelect", onDownloadFile: "onDownloadFile" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "suggestionOverlay", first: true, predicate: ["suggestionOverlay"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"cax-comments\">\n    <div class=\"cax-comments-container\" #scrollContainer>\n        <div class=\"cax-comments-empty\" *ngIf=\"groupedComments.length === 0\">\n            <i class=\"cax cax-chat-line-bold\"></i>\n            <div>\n                <span class=\"cax-text-action-md-medium\">No comments yet</span>\n                <span class=\"cax-text-action-sm-regular\">You can post a comment here to start the conversation. All feedback and discussions will appear here.</span>\n            </div>\n        </div>\n        <div class=\"cax-comments-group\" *ngFor=\"let group of groupedComments\">\n            <div class=\"cax-comments-date\">\n                <span class=\"cax-text-action-xsm-semibold\">{{ group.date | date: 'MMM d, y' }}</span>\n            </div>\n            <div class=\"cax-comment-row\" *ngFor=\"let comment of group.comments; let i = index\" [class.current-user]=\"comment.currentUser\" [class.consecutive]=\"isConsecutive(group.comments, i)\">\n                <div class=\"cax-avatar-container\" *ngIf=\"!comment.currentUser\">\n                    <cax-avatar *ngIf=\"isLastInGroup(group.comments, i); else avatarSpacer\" [label]=\"getInitials(comment.author)\" shape=\"square\" avatarSize=\"sm\"></cax-avatar>\n                    <ng-template #avatarSpacer>\n                        <div class=\"avatar-spacer\"></div>\n                    </ng-template>\n                </div>\n                <div class=\"cax-comment-bubble\">\n                    <div class=\"cax-comment-message-container\">\n                        <span class=\"cax-comment-username cax-text-body-sm-semibold\" *ngIf=\"!comment.currentUser\">{{ comment.author?.firstName }} {{ comment.author?.lastName }}</span>\n                        <div class=\"cax-comment-attachments\" *ngIf=\"comment.attachments?.length\">\n                            <div *ngFor=\"let file of comment.attachments\" class=\"cax-comment-file-preview\">\n                                <span class=\"cax-comment-file-name cax-text-action-md-medium\">{{ file.name }}</span>\n                                <span class=\"cax-comment-file-size cax-text-action-sm-medium\">{{ formatBytes(file.size) }}</span>\n                                <span class=\"cax cax-download cax-comment-file-download\" (click)=\"onDownload(file)\"></span>\n                            </div>\n                        </div>\n                        <span class=\"cax-comment-message cax-text-body-md-regular\" [innerHTML]=\"comment.message\"></span>\n                        <span class=\"cax-comment-time cax-text-action-sm-medium\">{{ comment.timestamp | date: 'shortTime' }}</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"cax-comment-bar\">\n        <div class=\"cax-comment-input-wrapper\" [class.toolbar-hidden]=\"!isRichText\" (keydown)=\"onEditorKeyDown($event)\">\n            <cax-editor #editor [placeholder]=\"commentPlaceholder\" [style]=\"{ maxHeight: '300px' }\" [(ngModel)]=\"commentValue\" (onTextChange)=\"onEditorTextChange($event)\">\n                <ng-template caxTemplate=\"header\">\n                    <span class=\"ql-formats\">\n                        <button type=\"button\" class=\"ql-bold\" aria-label=\"Bold\"></button>\n                        <button type=\"button\" class=\"ql-italic\" aria-label=\"Italic\"></button>\n                        <button type=\"button\" class=\"ql-underline\" aria-label=\"Underline\"></button>\n                        <button type=\"button\" class=\"ql-list\" value=\"bullet\" aria-label=\"Bullet List\"></button>\n                        <button type=\"button\" class=\"ql-link\" aria-label=\"Insert Link\"></button>\n                        <button type=\"button\" class=\"ql-image\" aria-label=\"Insert Image\"></button>\n                        <button type=\"button\" class=\"ql-code-block\" aria-label=\"Code Block\"></button>\n                    </span>\n                </ng-template>\n            </cax-editor>\n            <div class=\"cax-comment-input-footer\">\n                <div class=\"cax-comment-attached-files\">\n                    <div class=\"cax-comment-attached-file\" *ngFor=\"let file of attachedFiles; let i = index\">\n                        <span class=\"file-name cax-text-action-md-medium\">{{ file.name }}</span>\n                        <i class=\"cax cax-close\" (click)=\"removeAttachedFile(i)\"></i>\n                    </div>\n                </div>\n                <div class=\"cax-comment-bar-actions\">\n                    <div (click)=\"toggleRichText()\" [class.active]=\"isRichText\">\n                        <i class=\"cax cax-text-icon\"></i>\n                    </div>\n                    <div (click)=\"fileInput.click()\">\n                        <i class=\"cax cax-paperclip\"></i>\n                        <input type=\"file\" #fileInput [accept]=\"acceptFileTypes\" style=\"display: none\" (change)=\"onFileSelected($event)\" multiple />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"cax-comment-bar-actions\">\n            <cax-button [icon]=\"'cax cax-plain'\" [rounded]=\"true\" [size]=\"'lg'\" [disabled]=\"!commentValue && attachedFiles.length === 0\" (click)=\"onSendMessage()\"></cax-button>\n        </div>\n    </div>\n\n    <cax-overlayPanel styleClass=\"cax-comments-suggestion-overlay\" #suggestionOverlay [style]=\"{ width: '250px', 'max-height': '300px' }\" (onHide)=\"hideSuggestions()\">\n        <div class=\"cax-comments-suggestion-list\">\n            <div class=\"cax-comments-suggestion-item\" *ngFor=\"let item of filteredSuggestions\" (mousedown)=\"$event.preventDefault(); onSuggestionSelect(item)\">\n                <ng-container *ngIf=\"suggestionType === '@'\">\n                    <cax-avatar [label]=\"getInitials(item)\" shape=\"circle\" avatarSize=\"sm\"></cax-avatar>\n                    <div class=\"cax-comments-suggestion-info\">\n                        <span class=\"cax-comments-suggestion-label\">{{ item.firstName }} {{ item.lastName }}</span>\n                        <span class=\"cax-comments-suggestion-subtext\">&#64;{{ item.userName }}</span>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"suggestionType === '#'\">\n                    <div class=\"cax-comments-suggestion-info\">\n                        <span class=\"cax-comments-suggestion-label\">{{ item }}</span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </cax-overlayPanel>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Avatar, selector: "cax-avatar", inputs: ["label", "icon", "image", "avatarSize", "shape", "style", "styleClass", "textColor", "backgroundColor", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i4.Editor, selector: "cax-editor", inputs: ["style", "styleClass", "placeholder", "disabled", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i6.OverlayPanel, selector: "cax-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "variant", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: ChipModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CommentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cax-comments', standalone: true, imports: [CommonModule, Avatar, ButtonModule, EditorModule, FormsModule, OverlayPanelModule, ListboxModule, SharedModule, ChipModule], template: "<div class=\"cax-comments\">\n    <div class=\"cax-comments-container\" #scrollContainer>\n        <div class=\"cax-comments-empty\" *ngIf=\"groupedComments.length === 0\">\n            <i class=\"cax cax-chat-line-bold\"></i>\n            <div>\n                <span class=\"cax-text-action-md-medium\">No comments yet</span>\n                <span class=\"cax-text-action-sm-regular\">You can post a comment here to start the conversation. All feedback and discussions will appear here.</span>\n            </div>\n        </div>\n        <div class=\"cax-comments-group\" *ngFor=\"let group of groupedComments\">\n            <div class=\"cax-comments-date\">\n                <span class=\"cax-text-action-xsm-semibold\">{{ group.date | date: 'MMM d, y' }}</span>\n            </div>\n            <div class=\"cax-comment-row\" *ngFor=\"let comment of group.comments; let i = index\" [class.current-user]=\"comment.currentUser\" [class.consecutive]=\"isConsecutive(group.comments, i)\">\n                <div class=\"cax-avatar-container\" *ngIf=\"!comment.currentUser\">\n                    <cax-avatar *ngIf=\"isLastInGroup(group.comments, i); else avatarSpacer\" [label]=\"getInitials(comment.author)\" shape=\"square\" avatarSize=\"sm\"></cax-avatar>\n                    <ng-template #avatarSpacer>\n                        <div class=\"avatar-spacer\"></div>\n                    </ng-template>\n                </div>\n                <div class=\"cax-comment-bubble\">\n                    <div class=\"cax-comment-message-container\">\n                        <span class=\"cax-comment-username cax-text-body-sm-semibold\" *ngIf=\"!comment.currentUser\">{{ comment.author?.firstName }} {{ comment.author?.lastName }}</span>\n                        <div class=\"cax-comment-attachments\" *ngIf=\"comment.attachments?.length\">\n                            <div *ngFor=\"let file of comment.attachments\" class=\"cax-comment-file-preview\">\n                                <span class=\"cax-comment-file-name cax-text-action-md-medium\">{{ file.name }}</span>\n                                <span class=\"cax-comment-file-size cax-text-action-sm-medium\">{{ formatBytes(file.size) }}</span>\n                                <span class=\"cax cax-download cax-comment-file-download\" (click)=\"onDownload(file)\"></span>\n                            </div>\n                        </div>\n                        <span class=\"cax-comment-message cax-text-body-md-regular\" [innerHTML]=\"comment.message\"></span>\n                        <span class=\"cax-comment-time cax-text-action-sm-medium\">{{ comment.timestamp | date: 'shortTime' }}</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"cax-comment-bar\">\n        <div class=\"cax-comment-input-wrapper\" [class.toolbar-hidden]=\"!isRichText\" (keydown)=\"onEditorKeyDown($event)\">\n            <cax-editor #editor [placeholder]=\"commentPlaceholder\" [style]=\"{ maxHeight: '300px' }\" [(ngModel)]=\"commentValue\" (onTextChange)=\"onEditorTextChange($event)\">\n                <ng-template caxTemplate=\"header\">\n                    <span class=\"ql-formats\">\n                        <button type=\"button\" class=\"ql-bold\" aria-label=\"Bold\"></button>\n                        <button type=\"button\" class=\"ql-italic\" aria-label=\"Italic\"></button>\n                        <button type=\"button\" class=\"ql-underline\" aria-label=\"Underline\"></button>\n                        <button type=\"button\" class=\"ql-list\" value=\"bullet\" aria-label=\"Bullet List\"></button>\n                        <button type=\"button\" class=\"ql-link\" aria-label=\"Insert Link\"></button>\n                        <button type=\"button\" class=\"ql-image\" aria-label=\"Insert Image\"></button>\n                        <button type=\"button\" class=\"ql-code-block\" aria-label=\"Code Block\"></button>\n                    </span>\n                </ng-template>\n            </cax-editor>\n            <div class=\"cax-comment-input-footer\">\n                <div class=\"cax-comment-attached-files\">\n                    <div class=\"cax-comment-attached-file\" *ngFor=\"let file of attachedFiles; let i = index\">\n                        <span class=\"file-name cax-text-action-md-medium\">{{ file.name }}</span>\n                        <i class=\"cax cax-close\" (click)=\"removeAttachedFile(i)\"></i>\n                    </div>\n                </div>\n                <div class=\"cax-comment-bar-actions\">\n                    <div (click)=\"toggleRichText()\" [class.active]=\"isRichText\">\n                        <i class=\"cax cax-text-icon\"></i>\n                    </div>\n                    <div (click)=\"fileInput.click()\">\n                        <i class=\"cax cax-paperclip\"></i>\n                        <input type=\"file\" #fileInput [accept]=\"acceptFileTypes\" style=\"display: none\" (change)=\"onFileSelected($event)\" multiple />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"cax-comment-bar-actions\">\n            <cax-button [icon]=\"'cax cax-plain'\" [rounded]=\"true\" [size]=\"'lg'\" [disabled]=\"!commentValue && attachedFiles.length === 0\" (click)=\"onSendMessage()\"></cax-button>\n        </div>\n    </div>\n\n    <cax-overlayPanel styleClass=\"cax-comments-suggestion-overlay\" #suggestionOverlay [style]=\"{ width: '250px', 'max-height': '300px' }\" (onHide)=\"hideSuggestions()\">\n        <div class=\"cax-comments-suggestion-list\">\n            <div class=\"cax-comments-suggestion-item\" *ngFor=\"let item of filteredSuggestions\" (mousedown)=\"$event.preventDefault(); onSuggestionSelect(item)\">\n                <ng-container *ngIf=\"suggestionType === '@'\">\n                    <cax-avatar [label]=\"getInitials(item)\" shape=\"circle\" avatarSize=\"sm\"></cax-avatar>\n                    <div class=\"cax-comments-suggestion-info\">\n                        <span class=\"cax-comments-suggestion-label\">{{ item.firstName }} {{ item.lastName }}</span>\n                        <span class=\"cax-comments-suggestion-subtext\">&#64;{{ item.userName }}</span>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"suggestionType === '#'\">\n                    <div class=\"cax-comments-suggestion-info\">\n                        <span class=\"cax-comments-suggestion-label\">{{ item }}</span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </cax-overlayPanel>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer']
+            }], suggestionOverlay: [{
+                type: ViewChild,
+                args: ['suggestionOverlay']
+            }], comments: [{
+                type: Input
+            }], commentPlaceholder: [{
+                type: Input
+            }], mentionSuggestions: [{
+                type: Input
+            }], hashTagSuggestions: [{
+                type: Input
+            }], acceptedFiles: [{
+                type: Input
+            }], onSendComment: [{
+                type: Output
+            }], onFileSelect: [{
+                type: Output
+            }], onDownloadFile: [{
+                type: Output
+            }], editor: [{
+                type: ViewChild,
+                args: ['editor']
+            }] } });
+
+class CommentsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CommentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: CommentsModule, imports: [CommentsComponent], exports: [CommentsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CommentsModule, imports: [CommentsComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CommentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommentsComponent],
+                    exports: [CommentsComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CommentsComponent, CommentsModule };
+//# sourceMappingURL=cax-design-system-comments.mjs.map

package/fesm2022/cax-design-system-comments.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cax-design-system-comments.mjs","sources":["../../src/app/components/comments/comments.ts","../../src/app/components/comments/comments.html","../../src/app/components/comments/comments.module.ts","../../src/app/components/comments/cax-design-system-comments.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output, ViewChild, ElementRef, ChangeDetectorRef, AfterViewInit, OnDestroy } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { Avatar } from 'cax-design-system/avatar';\nimport { ButtonModule } from 'cax-design-system/button';\nimport { EditorModule } from 'cax-design-system/editor';\nimport { OverlayPanelModule, OverlayPanel } from 'cax-design-system/overlaypanel';\nimport { ListboxModule } from 'cax-design-system/listbox';\nimport { SharedModule } from 'cax-design-system/api';\nimport { ChipModule } from 'cax-design-system/chip';\n\ninterface MentionUser {\n    firstName: string;\n    lastName: string;\n    userName: string;\n}\n\ninterface Comment {\n    message: string;\n    timestamp: string;\n    currentUser?: boolean;\n    author?: MentionUser;\n    attachments?: File[];\n}\n\ninterface GroupedComments {\n    date: Date;\n    comments: Comment[];\n}\n\n@Component({\n    selector: 'cax-comments',\n    templateUrl: './comments.html',\n    styleUrls: ['./comments.scss'],\n    standalone: true,\n    imports: [CommonModule, Avatar, ButtonModule, EditorModule, FormsModule, OverlayPanelModule, ListboxModule, SharedModule, ChipModule]\n})\nexport class CommentsComponent implements AfterViewInit, OnDestroy {\n    @ViewChild('scrollContainer') private scrollContainer!: ElementRef;\n    @ViewChild('suggestionOverlay') suggestionOverlay!: OverlayPanel;\n    private visibilityObserver?: IntersectionObserver;\n\n    private _comments: Comment[] = [];\n    groupedComments: GroupedComments[] = [];\n    isRichText: boolean = false;\n    commentValue: string = '';\n\n    // Suggestion state\n    isSuggestionVisible: boolean = false;\n    suggestionType: '@' | '#' | null = null;\n    filteredSuggestions: any[] = [];\n    triggerIndex: number = -1;\n    attachedFiles: File[] = [];\n    private lastBounds: any = null;\n\n    constructor(private cdr: ChangeDetectorRef) {}\n\n    ngAfterViewInit(): void {\n        this.scrollToBottom();\n        this.setupVisibilityObserver();\n    }\n\n    ngOnDestroy(): void {\n        if (this.visibilityObserver) {\n            this.visibilityObserver.disconnect();\n        }\n    }\n\n    @Input()\n    set comments(value: Comment[]) {\n        this._comments = value || [];\n        this.recomputeGroups();\n        this.scrollToBottom();\n    }\n\n    get comments(): Comment[] {\n        return this._comments;\n    }\n\n    @Input() commentPlaceholder: string = 'Add your comments here...';\n    private _mentionSuggestions: MentionUser[] = [];\n    private _hashTagSuggestions: string[] = [];\n\n    @Input()\n    set mentionSuggestions(value: MentionUser[]) {\n        this._mentionSuggestions = value || [];\n        this.recomputeGroups();\n    }\n\n    get mentionSuggestions(): MentionUser[] {\n        return this._mentionSuggestions;\n    }\n\n    @Input()\n    set hashTagSuggestions(value: string[]) {\n        this._hashTagSuggestions = value || [];\n        this.recomputeGroups();\n    }\n\n    get hashTagSuggestions(): string[] {\n        return this._hashTagSuggestions;\n    }\n\n    @Input() acceptedFiles: string[] = [];\n\n    get acceptFileTypes(): string {\n        if (!this.acceptedFiles || this.acceptedFiles.length === 0) return '';\n        return this.acceptedFiles.map((type) => (type.startsWith('.') ? type : `.${type}`)).join(',');\n    }\n\n    @Output() onSendComment = new EventEmitter<{ message: string; attachments: File[] }>();\n    @Output() onFileSelect = new EventEmitter<File[]>();\n    @Output() onDownloadFile = new EventEmitter<any>();\n    @ViewChild('editor') editor!: any;\n\n    private recomputeGroups(): void {\n        const groups = this._comments.reduce((acc: GroupedComments[], comment) => {\n            const date = new Date(comment.timestamp);\n            const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n\n            let group = acc.find((g) => g.date.getTime() === dateOnly.getTime());\n            if (!group) {\n                group = { date: dateOnly, comments: [] };\n                acc.push(group);\n            }\n            group.comments.push(comment);\n            return acc;\n        }, []);\n\n        groups.sort((a, b) => a.date.getTime() - b.date.getTime());\n\n        groups.forEach((group) => {\n            group.comments.forEach((comment) => {\n                comment.message = this.enrichMessage(comment.message);\n            });\n            group.comments.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n        });\n\n        this.groupedComments = groups;\n    }\n\n    private enrichMessage(message: string): string {\n        if (!message) return '';\n        let processedMessage = message;\n\n        // Replace empty paragraphs with line breaks for cleaner spacing\n        processedMessage = processedMessage.replace(/<p><br><\\/p>/g, '<br/>');\n        processedMessage = processedMessage.replace(/<p><\\/p>/g, '<br/>');\n        processedMessage = processedMessage.replace(/<p>&nbsp;<\\/p>/g, '<br/>');\n\n        // Extract and validate mentions\n        this._mentionSuggestions?.forEach((suggestion) => {\n            const username = suggestion.userName;\n            // Only wrap if not already wrapped in the mention span\n            // This regex checks for @username NOT preceded by the mention span start tag\n            const regex = new RegExp(`(?<!class=\"cax-comment-mention\">)@${username}\\\\b`, 'g');\n            processedMessage = processedMessage.replace(regex, `<span class=\"cax-comment-mention\">@${username}</span>`);\n        });\n\n        // Extract and validate hashtags\n        this._hashTagSuggestions?.forEach((tag) => {\n            // Only wrap if not already wrapped in the hashtag span\n            const regex = new RegExp(`(?<!class=\"cax-comment-hashtag\">)#${tag}\\\\b`, 'g');\n            processedMessage = processedMessage.replace(regex, `<span class=\"cax-comment-hashtag\">#${tag}</span>`);\n        });\n\n        // Trim trailing empty paragraphs or line breaks\n        processedMessage = processedMessage.replace(/(<p><br><\\/p>|<p><\\/p>|<br\\s*\\/?>)+$/, '');\n\n        return processedMessage;\n    }\n\n    getInitials(author?: { firstName: string; lastName: string }): string {\n        if (!author) return '?';\n        return ((author.firstName?.[0] || '') + (author.lastName?.[0] || '')).toUpperCase();\n    }\n\n    isLastInGroup(groupComments: Comment[], index: number): boolean {\n        const current = groupComments[index];\n        const next = groupComments[index + 1];\n\n        if (current.currentUser) return false;\n        if (!next) return true;\n\n        const currentAuthor = `${current.author?.firstName} ${current.author?.lastName}`;\n        const nextAuthor = `${next.author?.firstName} ${next.author?.lastName}`;\n\n        return next.currentUser || currentAuthor !== nextAuthor;\n    }\n\n    isConsecutive(groupComments: Comment[], index: number): boolean {\n        if (index === 0) return false;\n        const current = groupComments[index];\n        const prev = groupComments[index - 1];\n\n        const currentAuthor = `${current.author?.firstName} ${current.author?.lastName}`;\n        const prevAuthor = `${prev.author?.firstName} ${prev.author?.lastName}`;\n\n        return current.currentUser === prev.currentUser && currentAuthor === prevAuthor;\n    }\n\n    toggleRichText(): void {\n        this.isRichText = !this.isRichText;\n    }\n\n    onFileSelected(event: Event): void {\n        const input = event.target as HTMLInputElement;\n        if (input.files && input.files.length > 0) {\n            this.attachedFiles.push(...Array.from(input.files));\n            this.onFileSelect.emit(this.attachedFiles);\n        }\n        if (input) {\n            input.value = '';\n        }\n    }\n\n    removeAttachedFile(index: number): void {\n        this.attachedFiles.splice(index, 1);\n        this.onFileSelect.emit(this.attachedFiles);\n    }\n\n    onSendMessage(): void {\n        if (this.commentValue || this.attachedFiles.length > 0) {\n            const processedMessage = this.enrichMessage(this.commentValue);\n\n            this.onSendComment.emit({\n                message: processedMessage,\n                attachments: [...this.attachedFiles]\n            });\n\n            this.commentValue = '';\n            this.attachedFiles = [];\n            this.hideSuggestions();\n            this.scrollToBottom();\n        }\n    }\n\n    onDownload(file: any): void {\n        this.onDownloadFile.emit(file);\n    }\n\n    // Suggestion implementation\n    private showSuggestions(type: '@' | '#', index: number, bounds?: any): void {\n        this.suggestionType = type;\n        this.triggerIndex = index;\n        this.lastBounds = bounds;\n        this.filterSuggestions('');\n\n        const target = this.editor?.el.nativeElement.querySelector('.cax-editor-content');\n        if (!target) return;\n\n        this.suggestionOverlay.show(null, target);\n        this.updateOverlayPosition();\n    }\n\n    private updateOverlayPosition(): void {\n        setTimeout(() => {\n            const panel = (this.suggestionOverlay as any).container;\n            const target = this.editor?.el.nativeElement.querySelector('.cax-editor-content');\n            if (panel && this.lastBounds && target) {\n                const panelHeight = panel.offsetHeight;\n                const rect = target.getBoundingClientRect();\n\n                panel.style.position = 'fixed';\n                panel.style.zIndex = '9999';\n                panel.style.left = `${rect.left + this.lastBounds.left}px`;\n                panel.style.top = `${rect.top + this.lastBounds.top - panelHeight - 10}px`;\n                this.cdr.detectChanges();\n            }\n        }, 0);\n    }\n\n    hideSuggestions(): void {\n        if (this.suggestionType === null) return;\n        this.suggestionOverlay?.hide();\n        this.suggestionType = null;\n        this.filteredSuggestions = [];\n        this.triggerIndex = -1;\n        this.cdr.detectChanges();\n    }\n\n    onEditorTextChange(event: any): void {\n        const quill = this.editor.getQuill();\n        if (!quill) return;\n\n        // 20ms delay to ensure Quill and DOM are synchronized\n        setTimeout(() => {\n            const range = quill.getSelection();\n            if (!range) return;\n\n            const text = quill.getText(0, range.index);\n            const token = this.getTokenAtCursor(text, range.index);\n\n            if (token) {\n                const type = token.charAt(0) as '@' | '#';\n                const hasSuggestions = type === '@' ? this.mentionSuggestions?.length > 0 : this.hashTagSuggestions?.length > 0;\n\n                if (hasSuggestions) {\n                    // If trigger type changed while open, reset first\n                    if (this.suggestionType && this.suggestionType !== type) {\n                        this.hideSuggestions();\n                    }\n\n                    if (!this.suggestionType) {\n                        const bounds = quill.getBounds(range.index);\n                        this.showSuggestions(type, range.index, bounds);\n                    } else {\n                        this.filterSuggestions(token.slice(1));\n                        this.updateOverlayPosition();\n                    }\n                } else if (this.suggestionType) {\n                    this.hideSuggestions();\n                }\n            } else if (this.suggestionType) {\n                this.hideSuggestions();\n            }\n        }, 20);\n    }\n\n    private filterSuggestions(searchTerm: string): void {\n        const term = searchTerm.toLowerCase();\n\n        // Fast-path: if search term is empty, just return the full list\n        if (term === '') {\n            this.filteredSuggestions = this.suggestionType === '@' ? [...this._mentionSuggestions] : [...this._hashTagSuggestions];\n        } else if (this.suggestionType === '@') {\n            this.filteredSuggestions = this._mentionSuggestions?.filter((s) => s.firstName.toLowerCase().includes(term) || s.lastName.toLowerCase().includes(term) || s.userName.toLowerCase().includes(term));\n        } else {\n            this.filteredSuggestions = this._hashTagSuggestions?.filter((s) => s.toLowerCase().includes(term));\n        }\n\n        if (this.filteredSuggestions.length === 0 && searchTerm !== '') {\n            this.hideSuggestions();\n        }\n\n        this.cdr.detectChanges();\n    }\n\n    onSuggestionSelect(item: any): void {\n        const selectedValue = this.suggestionType === '@' ? `@${item.userName}` : `#${item}`;\n\n        const quill = (this.editor as any).getQuill();\n        const range = quill.getSelection();\n        if (range) {\n            const textBefore = quill.getText(0, range.index);\n            const token = this.getTokenAtCursor(textBefore, range.index);\n            const start = range.index - (token ? token.length : 0);\n            quill.deleteText(start, token ? token.length : 0);\n            quill.insertText(start, selectedValue + ' ');\n            quill.setSelection(start + selectedValue.length + 1);\n            quill.focus();\n        }\n\n        this.hideSuggestions();\n    }\n\n    private getTokenAtCursor(text: string, cursorPos: number): string | null {\n        const beforeCursor = text.slice(0, cursorPos);\n        const match = beforeCursor.match(/[@#][^\\s]*$/);\n        return match ? match[0] : null;\n    }\n\n    onEditorKeyDown(event: KeyboardEvent): void {\n        if (!this.isRichText && event.key === 'Enter' && !event.shiftKey) {\n            event.preventDefault();\n            event.stopPropagation();\n            this.onSendMessage();\n        }\n    }\n\n    formatBytes(bytes: number, decimals: number = 2): string {\n        if (!+bytes) return '0 Bytes';\n\n        const k = 1024;\n        const dm = decimals < 0 ? 0 : decimals;\n        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n        const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;\n    }\n\n    private scrollToBottom(): void {\n        setTimeout(() => {\n            if (this.scrollContainer) {\n                const element = this.scrollContainer.nativeElement;\n                element.scrollTop = element.scrollHeight;\n                this.cdr.detectChanges();\n            }\n        }, 100);\n    }\n\n    private setupVisibilityObserver(): void {\n        if (typeof IntersectionObserver !== 'undefined' && this.scrollContainer) {\n            this.visibilityObserver = new IntersectionObserver((entries) => {\n                entries.forEach((entry) => {\n                    if (entry.isIntersecting) {\n                        this.scrollToBottom();\n                    }\n                });\n            });\n            this.visibilityObserver.observe(this.scrollContainer.nativeElement);\n        }\n    }\n}\n","<div class=\"cax-comments\">\n    <div class=\"cax-comments-container\" #scrollContainer>\n        <div class=\"cax-comments-empty\" *ngIf=\"groupedComments.length === 0\">\n            <i class=\"cax cax-chat-line-bold\"></i>\n            <div>\n                <span class=\"cax-text-action-md-medium\">No comments yet</span>\n                <span class=\"cax-text-action-sm-regular\">You can post a comment here to start the conversation. All feedback and discussions will appear here.</span>\n            </div>\n        </div>\n        <div class=\"cax-comments-group\" *ngFor=\"let group of groupedComments\">\n            <div class=\"cax-comments-date\">\n                <span class=\"cax-text-action-xsm-semibold\">{{ group.date | date: 'MMM d, y' }}</span>\n            </div>\n            <div class=\"cax-comment-row\" *ngFor=\"let comment of group.comments; let i = index\" [class.current-user]=\"comment.currentUser\" [class.consecutive]=\"isConsecutive(group.comments, i)\">\n                <div class=\"cax-avatar-container\" *ngIf=\"!comment.currentUser\">\n                    <cax-avatar *ngIf=\"isLastInGroup(group.comments, i); else avatarSpacer\" [label]=\"getInitials(comment.author)\" shape=\"square\" avatarSize=\"sm\"></cax-avatar>\n                    <ng-template #avatarSpacer>\n                        <div class=\"avatar-spacer\"></div>\n                    </ng-template>\n                </div>\n                <div class=\"cax-comment-bubble\">\n                    <div class=\"cax-comment-message-container\">\n                        <span class=\"cax-comment-username cax-text-body-sm-semibold\" *ngIf=\"!comment.currentUser\">{{ comment.author?.firstName }} {{ comment.author?.lastName }}</span>\n                        <div class=\"cax-comment-attachments\" *ngIf=\"comment.attachments?.length\">\n                            <div *ngFor=\"let file of comment.attachments\" class=\"cax-comment-file-preview\">\n                                <span class=\"cax-comment-file-name cax-text-action-md-medium\">{{ file.name }}</span>\n                                <span class=\"cax-comment-file-size cax-text-action-sm-medium\">{{ formatBytes(file.size) }}</span>\n                                <span class=\"cax cax-download cax-comment-file-download\" (click)=\"onDownload(file)\"></span>\n                            </div>\n                        </div>\n                        <span class=\"cax-comment-message cax-text-body-md-regular\" [innerHTML]=\"comment.message\"></span>\n                        <span class=\"cax-comment-time cax-text-action-sm-medium\">{{ comment.timestamp | date: 'shortTime' }}</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"cax-comment-bar\">\n        <div class=\"cax-comment-input-wrapper\" [class.toolbar-hidden]=\"!isRichText\" (keydown)=\"onEditorKeyDown($event)\">\n            <cax-editor #editor [placeholder]=\"commentPlaceholder\" [style]=\"{ maxHeight: '300px' }\" [(ngModel)]=\"commentValue\" (onTextChange)=\"onEditorTextChange($event)\">\n                <ng-template caxTemplate=\"header\">\n                    <span class=\"ql-formats\">\n                        <button type=\"button\" class=\"ql-bold\" aria-label=\"Bold\"></button>\n                        <button type=\"button\" class=\"ql-italic\" aria-label=\"Italic\"></button>\n                        <button type=\"button\" class=\"ql-underline\" aria-label=\"Underline\"></button>\n                        <button type=\"button\" class=\"ql-list\" value=\"bullet\" aria-label=\"Bullet List\"></button>\n                        <button type=\"button\" class=\"ql-link\" aria-label=\"Insert Link\"></button>\n                        <button type=\"button\" class=\"ql-image\" aria-label=\"Insert Image\"></button>\n                        <button type=\"button\" class=\"ql-code-block\" aria-label=\"Code Block\"></button>\n                    </span>\n                </ng-template>\n            </cax-editor>\n            <div class=\"cax-comment-input-footer\">\n                <div class=\"cax-comment-attached-files\">\n                    <div class=\"cax-comment-attached-file\" *ngFor=\"let file of attachedFiles; let i = index\">\n                        <span class=\"file-name cax-text-action-md-medium\">{{ file.name }}</span>\n                        <i class=\"cax cax-close\" (click)=\"removeAttachedFile(i)\"></i>\n                    </div>\n                </div>\n                <div class=\"cax-comment-bar-actions\">\n                    <div (click)=\"toggleRichText()\" [class.active]=\"isRichText\">\n                        <i class=\"cax cax-text-icon\"></i>\n                    </div>\n                    <div (click)=\"fileInput.click()\">\n                        <i class=\"cax cax-paperclip\"></i>\n                        <input type=\"file\" #fileInput [accept]=\"acceptFileTypes\" style=\"display: none\" (change)=\"onFileSelected($event)\" multiple />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"cax-comment-bar-actions\">\n            <cax-button [icon]=\"'cax cax-plain'\" [rounded]=\"true\" [size]=\"'lg'\" [disabled]=\"!commentValue && attachedFiles.length === 0\" (click)=\"onSendMessage()\"></cax-button>\n        </div>\n    </div>\n\n    <cax-overlayPanel styleClass=\"cax-comments-suggestion-overlay\" #suggestionOverlay [style]=\"{ width: '250px', 'max-height': '300px' }\" (onHide)=\"hideSuggestions()\">\n        <div class=\"cax-comments-suggestion-list\">\n            <div class=\"cax-comments-suggestion-item\" *ngFor=\"let item of filteredSuggestions\" (mousedown)=\"$event.preventDefault(); onSuggestionSelect(item)\">\n                <ng-container *ngIf=\"suggestionType === '@'\">\n                    <cax-avatar [label]=\"getInitials(item)\" shape=\"circle\" avatarSize=\"sm\"></cax-avatar>\n                    <div class=\"cax-comments-suggestion-info\">\n                        <span class=\"cax-comments-suggestion-label\">{{ item.firstName }} {{ item.lastName }}</span>\n                        <span class=\"cax-comments-suggestion-subtext\">&#64;{{ item.userName }}</span>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"suggestionType === '#'\">\n                    <div class=\"cax-comments-suggestion-info\">\n                        <span class=\"cax-comments-suggestion-label\">{{ item }}</span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </cax-overlayPanel>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommentsComponent } from './comments';\n\n@NgModule({\n    imports: [CommentsComponent],\n    exports: [CommentsComponent]\n})\nexport class CommentsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}