@memberjunction/ng-conversations 2.129.0 → 2.130.0

package/dist/lib/components/mention/mention-editor.component.js

@@ -6,14 +6,63 @@ import * as i1 from "../../services/mention-autocomplete.service";
 import * as i2 from "@angular/common";
 import * as i3 from "./mention-dropdown.component";
 const _c0 = ["editor"];
-function MentionEditorComponent_mj_mention_dropdown_3_Template(rf, ctx) { if (rf & 1) {
+function MentionEditorComponent_div_1_div_1_img_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 13);
+} if (rf & 2) {
+    const attachment_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", attachment_r3.thumbnailUrl, i0.ɵɵsanitizeUrl)("alt", attachment_r3.fileName);
+} }
+function MentionEditorComponent_div_1_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementStart(2, "span", 16);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const attachment_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(attachment_r3.fileName);
+} }
+function MentionEditorComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-mention-dropdown", 4);
-    i0.ɵɵlistener("suggestionSelected", function MentionEditorComponent_mj_mention_dropdown_3_Template_mj_mention_dropdown_suggestionSelected_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMentionSelected($event)); })("closed", function MentionEditorComponent_mj_mention_dropdown_3_Template_mj_mention_dropdown_closed_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeMentionDropdown()); });
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵlistener("click", function MentionEditorComponent_div_1_div_1_Template_div_click_0_listener() { const attachment_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onAttachmentClick(attachment_r3)); });
+    i0.ɵɵtemplate(1, MentionEditorComponent_div_1_div_1_img_1_Template, 1, 2, "img", 9)(2, MentionEditorComponent_div_1_div_1_div_2_Template, 4, 1, "div", 10);
+    i0.ɵɵelementStart(3, "button", 11);
+    i0.ɵɵlistener("click", function MentionEditorComponent_div_1_div_1_Template_button_click_3_listener($event) { const attachment_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); ctx_r3.removeAttachment(attachment_r3.id); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(4, "i", 12);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const attachment_r3 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", attachment_r3.thumbnailUrl);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !attachment_r3.thumbnailUrl);
+} }
+function MentionEditorComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵtemplate(1, MentionEditorComponent_div_1_div_1_Template, 5, 2, "div", 7);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r3.pendingAttachments);
+} }
+function MentionEditorComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18);
+    i0.ɵɵelement(2, "i", 19);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Drop files here");
+    i0.ɵɵelementEnd()()();
+} }
+function MentionEditorComponent_mj_mention_dropdown_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-mention-dropdown", 20);
+    i0.ɵɵlistener("suggestionSelected", function MentionEditorComponent_mj_mention_dropdown_5_Template_mj_mention_dropdown_suggestionSelected_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onMentionSelected($event)); })("closed", function MentionEditorComponent_mj_mention_dropdown_5_Template_mj_mention_dropdown_closed_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeMentionDropdown()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("suggestions", ctx_r2.mentionSuggestions)("position", ctx_r2.mentionDropdownPosition)("showAbove", ctx_r2.mentionDropdownShowAbove)("useFixedPositioning", true)("visible", true);
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("suggestions", ctx_r3.mentionSuggestions)("position", ctx_r3.mentionDropdownPosition)("showAbove", ctx_r3.mentionDropdownShowAbove)("useFixedPositioning", true)("visible", true);
 } }
 /**
  * ContentEditable-based mention editor with visual chips/pills
@@ -21,14 +70,26 @@ function MentionEditorComponent_mj_mention_dropdown_3_Template(rf, ctx) { if (rf
  */
 export class MentionEditorComponent {
     mentionAutocomplete;
+    cdr;
     editorRef;
     placeholder = 'Type @ to mention agents or users...';
     disabled = false;
     currentUser;
     enableMentions = true;
+    // Attachment settings
+    enableAttachments = true;
+    maxAttachments = 10;
+    maxAttachmentSizeBytes = 20 * 1024 * 1024; // 20MB default
+    acceptedFileTypes = 'image/*'; // MIME types to accept
     valueChange = new EventEmitter();
     mentionSelected = new EventEmitter();
     enterPressed = new EventEmitter();
+    attachmentsChanged = new EventEmitter();
+    attachmentError = new EventEmitter();
+    attachmentClicked = new EventEmitter();
+    // Pending attachments state
+    pendingAttachments = [];
+    isDragOver = false;
     // Mention dropdown state
     showMentionDropdown = false;
     mentionSuggestions = [];
@@ -38,8 +99,9 @@ export class MentionEditorComponent {
     mentionQuery = '';
     onChange = () => { };
     onTouched = () => { };
-    constructor(mentionAutocomplete) {
+    constructor(mentionAutocomplete, cdr) {
         this.mentionAutocomplete = mentionAutocomplete;
+        this.cdr = cdr;
     }
     async ngOnInit() {
         if (this.enableMentions && this.currentUser) {
@@ -98,15 +160,31 @@ export class MentionEditorComponent {
         // Use setTimeout to allow mousedown events on dropdown to fire first
         setTimeout(() => {
             if (this.showMentionDropdown) {
-                console.log('[MentionEditor] Closing dropdown on blur');
                 this.closeMentionDropdown();
             }
         }, 200);
     }
     /**
-     * Handle paste event - strip HTML and paste as plain text only
+     * Handle paste event - images or plain text
      */
     onPaste(event) {
+        // Check for image data in clipboard
+        if (this.enableAttachments && event.clipboardData?.items) {
+            const items = Array.from(event.clipboardData.items);
+            const imageItems = items.filter(item => item.type.startsWith('image/'));
+            if (imageItems.length > 0) {
+                event.preventDefault();
+                // Process each image
+                for (const item of imageItems) {
+                    const file = item.getAsFile();
+                    if (file) {
+                        this.processFile(file);
+                    }
+                }
+                return;
+            }
+        }
+        // No images - handle as plain text
         event.preventDefault();
         // Get plain text from clipboard
         const text = event.clipboardData?.getData('text/plain') || '';
@@ -232,7 +310,6 @@ export class MentionEditorComponent {
      * Handle mention selection from dropdown
      */
     onMentionSelected(suggestion) {
-        console.log('[MentionEditor] Mention selected:', suggestion);
         this.insertMentionChip(suggestion);
         this.closeMentionDropdown();
         this.mentionSelected.emit(suggestion);
@@ -698,13 +775,14 @@ export class MentionEditorComponent {
         this.editorRef?.nativeElement?.focus();
     }
     /**
-     * Clear the editor content
+     * Clear the editor content and pending attachments
      */
     clear() {
         if (this.editorRef?.nativeElement) {
             this.editorRef.nativeElement.textContent = '';
             this.onInput();
         }
+        this.clearPendingAttachments();
     }
     /**
      * Extract mention chips with their configuration data
@@ -788,33 +866,269 @@ export class MentionEditorComponent {
         }
         return plainText;
     }
-    static ɵfac = function MentionEditorComponent_Factory(t) { return new (t || MentionEditorComponent)(i0.ɵɵdirectiveInject(i1.MentionAutocompleteService)); };
+    // ==================== Attachment Handling Methods ====================
+    /**
+     * Handle drag over event
+     */
+    onDragOver(event) {
+        if (!this.enableAttachments)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = true;
+    }
+    /**
+     * Handle drag leave event
+     */
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+    }
+    /**
+     * Handle drop event
+     */
+    onDrop(event) {
+        if (!this.enableAttachments)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+        if (event.dataTransfer?.files) {
+            const files = Array.from(event.dataTransfer.files);
+            for (const file of files) {
+                if (this.isAcceptedFile(file)) {
+                    this.processFile(file);
+                }
+            }
+        }
+    }
+    /**
+     * Handle file input change (from file picker)
+     */
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files) {
+            const files = Array.from(input.files);
+            for (const file of files) {
+                this.processFile(file);
+            }
+            // Reset input so same file can be selected again
+            input.value = '';
+        }
+    }
+    /**
+     * Process a file for attachment
+     */
+    async processFile(file) {
+        // Validate file
+        const validation = this.validateFile(file);
+        if (!validation.valid) {
+            this.attachmentError.emit(validation.error);
+            return;
+        }
+        // Read file as data URL
+        const dataUrl = await this.readFileAsDataUrl(file);
+        if (!dataUrl) {
+            this.attachmentError.emit('Failed to read file');
+            return;
+        }
+        // Get image dimensions if applicable
+        let width;
+        let height;
+        if (file.type.startsWith('image/')) {
+            const dimensions = await this.getImageDimensions(dataUrl);
+            width = dimensions.width;
+            height = dimensions.height;
+        }
+        // Create pending attachment
+        const attachment = {
+            id: this.generateAttachmentId(),
+            file,
+            dataUrl,
+            mimeType: file.type,
+            fileName: file.name,
+            sizeBytes: file.size,
+            width,
+            height,
+            thumbnailUrl: file.type.startsWith('image/') ? dataUrl : undefined
+        };
+        // Add to pending attachments
+        this.pendingAttachments.push(attachment);
+        this.attachmentsChanged.emit([...this.pendingAttachments]);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Validate a file against settings
+     */
+    validateFile(file) {
+        // Check count limit
+        if (this.pendingAttachments.length >= this.maxAttachments) {
+            return {
+                valid: false,
+                error: `Maximum ${this.maxAttachments} attachments allowed`
+            };
+        }
+        // Check size limit
+        if (file.size > this.maxAttachmentSizeBytes) {
+            const maxMB = (this.maxAttachmentSizeBytes / (1024 * 1024)).toFixed(1);
+            const fileMB = (file.size / (1024 * 1024)).toFixed(1);
+            return {
+                valid: false,
+                error: `File size (${fileMB}MB) exceeds maximum (${maxMB}MB)`
+            };
+        }
+        // Check file type
+        if (!this.isAcceptedFile(file)) {
+            return {
+                valid: false,
+                error: `File type ${file.type || 'unknown'} not accepted`
+            };
+        }
+        return { valid: true };
+    }
+    /**
+     * Check if file type is accepted
+     */
+    isAcceptedFile(file) {
+        if (this.acceptedFileTypes === '*' || this.acceptedFileTypes === '*/*') {
+            return true;
+        }
+        const acceptedTypes = this.acceptedFileTypes.split(',').map(t => t.trim());
+        for (const accepted of acceptedTypes) {
+            // Handle wildcard MIME types like "image/*"
+            if (accepted.endsWith('/*')) {
+                const category = accepted.slice(0, -2);
+                if (file.type.startsWith(category + '/')) {
+                    return true;
+                }
+            }
+            else if (accepted.startsWith('.')) {
+                // Handle file extensions like ".png"
+                if (file.name.toLowerCase().endsWith(accepted.toLowerCase())) {
+                    return true;
+                }
+            }
+            else if (file.type === accepted) {
+                // Exact MIME type match
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Read file as data URL
+     */
+    readFileAsDataUrl(file) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = () => resolve(null);
+            reader.readAsDataURL(file);
+        });
+    }
+    /**
+     * Get image dimensions
+     */
+    getImageDimensions(dataUrl) {
+        return new Promise((resolve) => {
+            const img = new Image();
+            img.onload = () => {
+                resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            };
+            img.onerror = () => {
+                resolve({ width: 0, height: 0 });
+            };
+            img.src = dataUrl;
+        });
+    }
+    /**
+     * Generate unique attachment ID
+     */
+    generateAttachmentId() {
+        return `att_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+    /**
+     * Remove a pending attachment by ID
+     */
+    removeAttachment(id) {
+        const index = this.pendingAttachments.findIndex(a => a.id === id);
+        if (index !== -1) {
+            this.pendingAttachments.splice(index, 1);
+            this.attachmentsChanged.emit([...this.pendingAttachments]);
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Get all pending attachments
+     */
+    getPendingAttachments() {
+        return [...this.pendingAttachments];
+    }
+    /**
+     * Clear all pending attachments
+     */
+    clearPendingAttachments() {
+        this.pendingAttachments = [];
+        this.attachmentsChanged.emit([]);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle click on an attachment thumbnail
+     */
+    onAttachmentClick(attachment) {
+        this.attachmentClicked.emit(attachment);
+    }
+    /**
+     * Check if there are any pending attachments
+     */
+    hasAttachments() {
+        return this.pendingAttachments.length > 0;
+    }
+    /**
+     * Trigger file picker programmatically
+     */
+    openFilePicker() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = this.acceptedFileTypes;
+        input.multiple = true;
+        input.onchange = (e) => this.onFileSelected(e);
+        input.click();
+    }
+    static ɵfac = function MentionEditorComponent_Factory(t) { return new (t || MentionEditorComponent)(i0.ɵɵdirectiveInject(i1.MentionAutocompleteService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MentionEditorComponent, selectors: [["mj-mention-editor"]], viewQuery: function MentionEditorComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorRef = _t.first);
-        } }, inputs: { placeholder: "placeholder", disabled: "disabled", currentUser: "currentUser", enableMentions: "enableMentions" }, outputs: { valueChange: "valueChange", mentionSelected: "mentionSelected", enterPressed: "enterPressed" }, features: [i0.ɵɵProvidersFeature([
+        } }, inputs: { placeholder: "placeholder", disabled: "disabled", currentUser: "currentUser", enableMentions: "enableMentions", enableAttachments: "enableAttachments", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes" }, outputs: { valueChange: "valueChange", mentionSelected: "mentionSelected", enterPressed: "enterPressed", attachmentsChanged: "attachmentsChanged", attachmentError: "attachmentError", attachmentClicked: "attachmentClicked" }, features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => MentionEditorComponent),
                     multi: true
                 }
-            ])], decls: 4, vars: 3, consts: [["editor", ""], [1, "mention-editor-container", 3, "click"], ["contenteditable", "true", 1, "mention-editor", 3, "input", "keydown", "blur", "paste"], [3, "suggestions", "position", "showAbove", "useFixedPositioning", "visible", "suggestionSelected", "closed", 4, "ngIf"], [3, "suggestionSelected", "closed", "suggestions", "position", "showAbove", "useFixedPositioning", "visible"]], template: function MentionEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], decls: 6, vars: 7, consts: [["editor", ""], [1, "mention-editor-container", 3, "click", "dragover", "dragleave", "drop"], ["class", "pending-attachments", 4, "ngIf"], ["contenteditable", "true", 1, "mention-editor", 3, "input", "keydown", "blur", "paste"], ["class", "drop-overlay", 4, "ngIf"], [3, "suggestions", "position", "showAbove", "useFixedPositioning", "visible", "suggestionSelected", "closed", 4, "ngIf"], [1, "pending-attachments"], ["class", "attachment-thumbnail", 3, "click", 4, "ngFor", "ngForOf"], [1, "attachment-thumbnail", 3, "click"], ["class", "thumbnail-image", 3, "src", "alt", 4, "ngIf"], ["class", "thumbnail-placeholder", 4, "ngIf"], ["title", "Remove attachment", 1, "remove-attachment", 3, "click"], [1, "fa-solid", "fa-times"], [1, "thumbnail-image", 3, "src", "alt"], [1, "thumbnail-placeholder"], [1, "fa-solid", "fa-file"], [1, "file-name"], [1, "drop-overlay"], [1, "drop-message"], [1, "fa-solid", "fa-cloud-arrow-up"], [3, "suggestionSelected", "closed", "suggestions", "position", "showAbove", "useFixedPositioning", "visible"]], template: function MentionEditorComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵlistener("click", function MentionEditorComponent_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onContainerClick($event)); });
-            i0.ɵɵelementStart(1, "div", 2, 0);
-            i0.ɵɵlistener("input", function MentionEditorComponent_Template_div_input_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInput()); })("keydown", function MentionEditorComponent_Template_div_keydown_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("blur", function MentionEditorComponent_Template_div_blur_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); })("paste", function MentionEditorComponent_Template_div_paste_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onPaste($event)); });
+            i0.ɵɵlistener("click", function MentionEditorComponent_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onContainerClick($event)); })("dragover", function MentionEditorComponent_Template_div_dragover_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDragOver($event)); })("dragleave", function MentionEditorComponent_Template_div_dragleave_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDragLeave($event)); })("drop", function MentionEditorComponent_Template_div_drop_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDrop($event)); });
+            i0.ɵɵtemplate(1, MentionEditorComponent_div_1_Template, 2, 1, "div", 2);
+            i0.ɵɵelementStart(2, "div", 3, 0);
+            i0.ɵɵlistener("input", function MentionEditorComponent_Template_div_input_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInput()); })("keydown", function MentionEditorComponent_Template_div_keydown_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("blur", function MentionEditorComponent_Template_div_blur_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); })("paste", function MentionEditorComponent_Template_div_paste_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onPaste($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(3, MentionEditorComponent_mj_mention_dropdown_3_Template, 1, 5, "mj-mention-dropdown", 3);
+            i0.ɵɵtemplate(4, MentionEditorComponent_div_4_Template, 5, 0, "div", 4)(5, MentionEditorComponent_mj_mention_dropdown_5_Template, 1, 5, "mj-mention-dropdown", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
+            i0.ɵɵclassProp("drag-over", ctx.isDragOver);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.pendingAttachments.length > 0);
             i0.ɵɵadvance();
             i0.ɵɵattribute("contenteditable", !ctx.disabled)("data-placeholder", ctx.placeholder);
             i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.isDragOver);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.showMentionDropdown && ctx.enableMentions);
-        } }, dependencies: [i2.NgIf, i3.MentionDropdownComponent], styles: [".mention-editor-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  display: block;\n}\n\n.mention-editor[_ngcontent-%COMP%] {\n  display: block;\n  width: 100%;\n  min-height: 100px;\n  max-height: 300px;\n  padding: 7px 3.5rem 7px 12px;\n  outline: none;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  overflow-y: auto;\n  overflow-x: hidden;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  cursor: text;\n  user-select: text;\n  box-sizing: border-box;\n}\n.mention-editor[_ngcontent-%COMP%]:empty:before {\n  content: attr(data-placeholder);\n  color: var(--text-tertiary, #999);\n  pointer-events: none;\n  position: absolute;\n}\n.mention-editor[_ngcontent-%COMP%]:focus {\n  outline: none;\n}\n.mention-editor[contenteditable=false][_ngcontent-%COMP%] {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--background-disabled, #f5f5f5);\n}\n@media (max-width: 768px) {\n  .mention-editor[_ngcontent-%COMP%] {\n    font-size: 16px;\n    padding: 5px;\n    padding-right: 3rem;\n  }\n}\n\n  .mention-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: default;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n  pointer-events: all;\n  -webkit-user-modify: read-only;\n  -moz-user-modify: read-only;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border: 2px solid rgba(102, 126, 234, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n  animation: _ngcontent-%COMP%_chipInsert 0.15s ease-out;\n}\n  .mention-chip i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n  .mention-chip[data-mention-type=user] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n  border: 2px solid rgba(240, 147, 251, 0.4);\n}\n  .mention-chip:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n}\n  .mention-chip:focus,   .mention-chip.selected {\n  outline: 2px solid var(--primary-color, #007bff);\n  outline-offset: 2px;\n}\n@keyframes _ngcontent-%COMP%_chipInsert {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  .mention-editor[_ngcontent-%COMP%] {\n    color: black; \n\n    \n \n\n  }\n  .mention-editor[_ngcontent-%COMP%]:empty:before {\n    color: #777;\n  }\n  .mention-editor[contenteditable=false][_ngcontent-%COMP%] {\n    background: #2d2d2d;\n  }\n  .mention-chip[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);\n    color: #ce93d8;\n    border-color: #8e24aa;\n  }\n  .mention-chip[data-mention-type=user][_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #880e4f 0%, #ad1457 100%);\n    color: #f48fb1;\n    border-color: #c2185b;\n  }\n}\n.mention-editor[_ngcontent-%COMP%]   .mention-chip[_ngcontent-%COMP%]    + .mention-chip[_ngcontent-%COMP%] {\n  margin-left: 4px;\n}\n.mention-editor[_ngcontent-%COMP%]   br[_ngcontent-%COMP%] {\n  display: block;\n  content: \"\";\n  margin: 0;\n}\n\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.3);\n}"] });
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i3.MentionDropdownComponent], styles: [".mention-editor-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  display: block;\n}\n\n.mention-editor-container.drag-over[_ngcontent-%COMP%] {\n  background: rgba(102, 126, 234, 0.05);\n  border-color: #667eea;\n}\n\n.mention-editor[_ngcontent-%COMP%] {\n  display: block;\n  width: 100%;\n  min-height: 100px;\n  max-height: 300px;\n  padding: 7px 3.5rem 7px 12px;\n  outline: none;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  overflow-y: auto;\n  overflow-x: hidden;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  cursor: text;\n  user-select: text;\n  box-sizing: border-box;\n}\n.mention-editor[_ngcontent-%COMP%]:empty:before {\n  content: attr(data-placeholder);\n  color: var(--text-tertiary, #999);\n  pointer-events: none;\n  position: absolute;\n}\n.mention-editor[_ngcontent-%COMP%]:focus {\n  outline: none;\n}\n.mention-editor[contenteditable=false][_ngcontent-%COMP%] {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--background-disabled, #f5f5f5);\n}\n@media (max-width: 768px) {\n  .mention-editor[_ngcontent-%COMP%] {\n    font-size: 16px;\n    padding: 5px;\n    padding-right: 3rem;\n  }\n}\n\n  .mention-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: default;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n  pointer-events: all;\n  -webkit-user-modify: read-only;\n  -moz-user-modify: read-only;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border: 2px solid rgba(102, 126, 234, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n  animation: _ngcontent-%COMP%_chipInsert 0.15s ease-out;\n}\n  .mention-chip i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n  .mention-chip[data-mention-type=user] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n  border: 2px solid rgba(240, 147, 251, 0.4);\n}\n  .mention-chip:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n}\n  .mention-chip:focus,   .mention-chip.selected {\n  outline: 2px solid var(--primary-color, #007bff);\n  outline-offset: 2px;\n}\n@keyframes _ngcontent-%COMP%_chipInsert {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  .mention-editor[_ngcontent-%COMP%] {\n    color: black; \n\n    \n \n\n  }\n  .mention-editor[_ngcontent-%COMP%]:empty:before {\n    color: #777;\n  }\n  .mention-editor[contenteditable=false][_ngcontent-%COMP%] {\n    background: #2d2d2d;\n  }\n  .mention-chip[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);\n    color: #ce93d8;\n    border-color: #8e24aa;\n  }\n  .mention-chip[data-mention-type=user][_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #880e4f 0%, #ad1457 100%);\n    color: #f48fb1;\n    border-color: #c2185b;\n  }\n}\n.mention-editor[_ngcontent-%COMP%]   .mention-chip[_ngcontent-%COMP%]    + .mention-chip[_ngcontent-%COMP%] {\n  margin-left: 4px;\n}\n.mention-editor[_ngcontent-%COMP%]   br[_ngcontent-%COMP%] {\n  display: block;\n  content: \"\";\n  margin: 0;\n}\n\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n.mention-editor[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n\n\n\n.pending-attachments[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.attachment-thumbnail[_ngcontent-%COMP%] {\n  position: relative;\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  background: #f5f5f5;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.attachment-thumbnail[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.thumbnail-image[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.thumbnail-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 8px;\n  color: #666;\n}\n\n.thumbnail-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n  margin-bottom: 4px;\n  color: #999;\n}\n\n.thumbnail-placeholder[_ngcontent-%COMP%]   .file-name[_ngcontent-%COMP%] {\n  font-size: 10px;\n  text-align: center;\n  word-break: break-all;\n  line-height: 1.2;\n  max-height: 36px;\n  overflow: hidden;\n}\n\n.remove-attachment[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.6);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s, background 0.2s;\n}\n\n.attachment-thumbnail[_ngcontent-%COMP%]:hover   .remove-attachment[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.remove-attachment[_ngcontent-%COMP%]:hover {\n  background: rgba(220, 53, 69, 0.9);\n}\n\n.remove-attachment[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.drop-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  background: rgba(102, 126, 234, 0.15);\n  backdrop-filter: blur(2px);\n  border: 2px dashed #667eea;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n.drop-message[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  color: #667eea;\n  font-weight: 600;\n}\n\n.drop-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n}\n\n.drop-message[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n@media (prefers-color-scheme: dark) {\n  .pending-attachments[_ngcontent-%COMP%] {\n    background: rgba(255, 255, 255, 0.05);\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .attachment-thumbnail[_ngcontent-%COMP%] {\n    background: #333;\n    border-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumbnail-placeholder[_ngcontent-%COMP%] {\n    color: #aaa;\n  }\n\n  .thumbnail-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #777;\n  }\n\n  .drop-overlay[_ngcontent-%COMP%] {\n    background: rgba(102, 126, 234, 0.25);\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MentionEditorComponent, [{
         type: Component,
@@ -824,8 +1138,8 @@ export class MentionEditorComponent {
                         useExisting: forwardRef(() => MentionEditorComponent),
                         multi: true
                     }
-                ], template: "<div class=\"mention-editor-container\" (click)=\"onContainerClick($event)\">\n  <div\n    #editor\n    class=\"mention-editor\"\n    contenteditable=\"true\"\n    [attr.contenteditable]=\"!disabled\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (paste)=\"onPaste($event)\"\n  ></div>\n\n  <!-- Mention Dropdown -->\n  <mj-mention-dropdown\n    *ngIf=\"showMentionDropdown && enableMentions\"\n    [suggestions]=\"mentionSuggestions\"\n    [position]=\"mentionDropdownPosition\"\n    [showAbove]=\"mentionDropdownShowAbove\"\n    [useFixedPositioning]=\"true\"\n    [visible]=\"true\"\n    (suggestionSelected)=\"onMentionSelected($event)\"\n    (closed)=\"closeMentionDropdown()\">\n  </mj-mention-dropdown>\n</div>\n", styles: [".mention-editor-container {\n  position: relative;\n  width: 100%;\n  display: block;\n}\n\n.mention-editor {\n  display: block;\n  width: 100%;\n  min-height: 100px;\n  max-height: 300px;\n  padding: 7px 3.5rem 7px 12px;\n  outline: none;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  overflow-y: auto;\n  overflow-x: hidden;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  cursor: text;\n  user-select: text;\n  box-sizing: border-box;\n}\n.mention-editor:empty:before {\n  content: attr(data-placeholder);\n  color: var(--text-tertiary, #999);\n  pointer-events: none;\n  position: absolute;\n}\n.mention-editor:focus {\n  outline: none;\n}\n.mention-editor[contenteditable=false] {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--background-disabled, #f5f5f5);\n}\n@media (max-width: 768px) {\n  .mention-editor {\n    font-size: 16px;\n    padding: 5px;\n    padding-right: 3rem;\n  }\n}\n\n::ng-deep .mention-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: default;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n  pointer-events: all;\n  -webkit-user-modify: read-only;\n  -moz-user-modify: read-only;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border: 2px solid rgba(102, 126, 234, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n  animation: chipInsert 0.15s ease-out;\n}\n::ng-deep .mention-chip i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n::ng-deep .mention-chip[data-mention-type=user] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n  border: 2px solid rgba(240, 147, 251, 0.4);\n}\n::ng-deep .mention-chip:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n}\n::ng-deep .mention-chip:focus, ::ng-deep .mention-chip.selected {\n  outline: 2px solid var(--primary-color, #007bff);\n  outline-offset: 2px;\n}\n@keyframes chipInsert {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  .mention-editor {\n    color: black; /*computer preference level not yet supported*/\n    /*color: #e0e0e0;*/ /*Matt - please work on this - for some as it didn't work*/\n  }\n  .mention-editor:empty:before {\n    color: #777;\n  }\n  .mention-editor[contenteditable=false] {\n    background: #2d2d2d;\n  }\n  .mention-chip {\n    background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);\n    color: #ce93d8;\n    border-color: #8e24aa;\n  }\n  .mention-chip[data-mention-type=user] {\n    background: linear-gradient(135deg, #880e4f 0%, #ad1457 100%);\n    color: #f48fb1;\n    border-color: #c2185b;\n  }\n}\n.mention-editor .mention-chip + .mention-chip {\n  margin-left: 4px;\n}\n.mention-editor br {\n  display: block;\n  content: \"\";\n  margin: 0;\n}\n\n.mention-editor::-webkit-scrollbar {\n  width: 6px;\n}\n.mention-editor::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mention-editor::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n.mention-editor::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.3);\n}\n"] }]
-    }], () => [{ type: i1.MentionAutocompleteService }], { editorRef: [{
+                ], template: "<div class=\"mention-editor-container\"\n     [class.drag-over]=\"isDragOver\"\n     (click)=\"onContainerClick($event)\"\n     (dragover)=\"onDragOver($event)\"\n     (dragleave)=\"onDragLeave($event)\"\n     (drop)=\"onDrop($event)\">\n\n  <!-- Pending Attachments Preview -->\n  <div class=\"pending-attachments\" *ngIf=\"pendingAttachments.length > 0\">\n    <div class=\"attachment-thumbnail\"\n         *ngFor=\"let attachment of pendingAttachments\"\n         (click)=\"onAttachmentClick(attachment)\">\n      <img *ngIf=\"attachment.thumbnailUrl\"\n           [src]=\"attachment.thumbnailUrl\"\n           [alt]=\"attachment.fileName\"\n           class=\"thumbnail-image\">\n      <div *ngIf=\"!attachment.thumbnailUrl\" class=\"thumbnail-placeholder\">\n        <i class=\"fa-solid fa-file\"></i>\n        <span class=\"file-name\">{{ attachment.fileName }}</span>\n      </div>\n      <button class=\"remove-attachment\"\n              (click)=\"removeAttachment(attachment.id); $event.stopPropagation()\"\n              title=\"Remove attachment\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div\n    #editor\n    class=\"mention-editor\"\n    contenteditable=\"true\"\n    [attr.contenteditable]=\"!disabled\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (paste)=\"onPaste($event)\"\n  ></div>\n\n  <!-- Drag & Drop Overlay -->\n  <div class=\"drop-overlay\" *ngIf=\"isDragOver\">\n    <div class=\"drop-message\">\n      <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n      <span>Drop files here</span>\n    </div>\n  </div>\n\n  <!-- Mention Dropdown -->\n  <mj-mention-dropdown\n    *ngIf=\"showMentionDropdown && enableMentions\"\n    [suggestions]=\"mentionSuggestions\"\n    [position]=\"mentionDropdownPosition\"\n    [showAbove]=\"mentionDropdownShowAbove\"\n    [useFixedPositioning]=\"true\"\n    [visible]=\"true\"\n    (suggestionSelected)=\"onMentionSelected($event)\"\n    (closed)=\"closeMentionDropdown()\">\n  </mj-mention-dropdown>\n</div>\n", styles: [".mention-editor-container {\n  position: relative;\n  width: 100%;\n  display: block;\n}\n\n.mention-editor-container.drag-over {\n  background: rgba(102, 126, 234, 0.05);\n  border-color: #667eea;\n}\n\n.mention-editor {\n  display: block;\n  width: 100%;\n  min-height: 100px;\n  max-height: 300px;\n  padding: 7px 3.5rem 7px 12px;\n  outline: none;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  overflow-y: auto;\n  overflow-x: hidden;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  cursor: text;\n  user-select: text;\n  box-sizing: border-box;\n}\n.mention-editor:empty:before {\n  content: attr(data-placeholder);\n  color: var(--text-tertiary, #999);\n  pointer-events: none;\n  position: absolute;\n}\n.mention-editor:focus {\n  outline: none;\n}\n.mention-editor[contenteditable=false] {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--background-disabled, #f5f5f5);\n}\n@media (max-width: 768px) {\n  .mention-editor {\n    font-size: 16px;\n    padding: 5px;\n    padding-right: 3rem;\n  }\n}\n\n::ng-deep .mention-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: default;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n  pointer-events: all;\n  -webkit-user-modify: read-only;\n  -moz-user-modify: read-only;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border: 2px solid rgba(102, 126, 234, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n  animation: chipInsert 0.15s ease-out;\n}\n::ng-deep .mention-chip i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n::ng-deep .mention-chip[data-mention-type=user] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n  border: 2px solid rgba(240, 147, 251, 0.4);\n}\n::ng-deep .mention-chip:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n}\n::ng-deep .mention-chip:focus, ::ng-deep .mention-chip.selected {\n  outline: 2px solid var(--primary-color, #007bff);\n  outline-offset: 2px;\n}\n@keyframes chipInsert {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  .mention-editor {\n    color: black; /*computer preference level not yet supported*/\n    /*color: #e0e0e0;*/ /*Matt - please work on this - for some as it didn't work*/\n  }\n  .mention-editor:empty:before {\n    color: #777;\n  }\n  .mention-editor[contenteditable=false] {\n    background: #2d2d2d;\n  }\n  .mention-chip {\n    background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);\n    color: #ce93d8;\n    border-color: #8e24aa;\n  }\n  .mention-chip[data-mention-type=user] {\n    background: linear-gradient(135deg, #880e4f 0%, #ad1457 100%);\n    color: #f48fb1;\n    border-color: #c2185b;\n  }\n}\n.mention-editor .mention-chip + .mention-chip {\n  margin-left: 4px;\n}\n.mention-editor br {\n  display: block;\n  content: \"\";\n  margin: 0;\n}\n\n.mention-editor::-webkit-scrollbar {\n  width: 6px;\n}\n.mention-editor::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mention-editor::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n.mention-editor::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n/* ==================== Attachment Styles ==================== */\n\n.pending-attachments {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.attachment-thumbnail {\n  position: relative;\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  background: #f5f5f5;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.attachment-thumbnail:hover {\n  transform: scale(1.05);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.thumbnail-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.thumbnail-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 8px;\n  color: #666;\n}\n\n.thumbnail-placeholder i {\n  font-size: 24px;\n  margin-bottom: 4px;\n  color: #999;\n}\n\n.thumbnail-placeholder .file-name {\n  font-size: 10px;\n  text-align: center;\n  word-break: break-all;\n  line-height: 1.2;\n  max-height: 36px;\n  overflow: hidden;\n}\n\n.remove-attachment {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.6);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s, background 0.2s;\n}\n\n.attachment-thumbnail:hover .remove-attachment {\n  opacity: 1;\n}\n\n.remove-attachment:hover {\n  background: rgba(220, 53, 69, 0.9);\n}\n\n.remove-attachment i {\n  font-size: 10px;\n}\n\n/* Drop Overlay */\n.drop-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(102, 126, 234, 0.15);\n  backdrop-filter: blur(2px);\n  border: 2px dashed #667eea;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n.drop-message {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  color: #667eea;\n  font-weight: 600;\n}\n\n.drop-message i {\n  font-size: 32px;\n}\n\n.drop-message span {\n  font-size: 14px;\n}\n\n/* Dark Mode for Attachments */\n@media (prefers-color-scheme: dark) {\n  .pending-attachments {\n    background: rgba(255, 255, 255, 0.05);\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .attachment-thumbnail {\n    background: #333;\n    border-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumbnail-placeholder {\n    color: #aaa;\n  }\n\n  .thumbnail-placeholder i {\n    color: #777;\n  }\n\n  .drop-overlay {\n    background: rgba(102, 126, 234, 0.25);\n  }\n}\n"] }]
+    }], () => [{ type: i1.MentionAutocompleteService }, { type: i0.ChangeDetectorRef }], { editorRef: [{
             type: ViewChild,
             args: ['editor', { static: false }]
         }], placeholder: [{
@@ -836,12 +1150,26 @@ export class MentionEditorComponent {
             type: Input
         }], enableMentions: [{
             type: Input
+        }], enableAttachments: [{
+            type: Input
+        }], maxAttachments: [{
+            type: Input
+        }], maxAttachmentSizeBytes: [{
+            type: Input
+        }], acceptedFileTypes: [{
+            type: Input
         }], valueChange: [{
             type: Output
         }], mentionSelected: [{
             type: Output
         }], enterPressed: [{
             type: Output
+        }], attachmentsChanged: [{
+            type: Output
+        }], attachmentError: [{
+            type: Output
+        }], attachmentClicked: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MentionEditorComponent, { className: "MentionEditorComponent", filePath: "src/lib/components/mention/mention-editor.component.ts", lineNumber: 35 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MentionEditorComponent, { className: "MentionEditorComponent", filePath: "src/lib/components/mention/mention-editor.component.ts", lineNumber: 61 }); })();
 //# sourceMappingURL=mention-editor.component.js.map