@memberjunction/ng-composer 6.1.0-edge.1 → 6.1.0-edge.2

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

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ViewChild, forwardRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, forwardRef, HostListener } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DiscoverComposerTriggerProviders } from '../../composer-trigger-provider';
 import { UUIDsEqual } from '@memberjunction/global';
@@ -62,7 +62,7 @@ function MentionEditorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("suggestions", ctx_r3.mentionSuggestions)("position", ctx_r3.mentionDropdownPosition)("showAbove", ctx_r3.mentionDropdownShowAbove)("useFixedPositioning", true)("visible", true);
+    i0.ɵɵproperty("suggestions", ctx_r3.mentionSuggestions)("position", ctx_r3.mentionDropdownPosition)("showAbove", ctx_r3.mentionDropdownShowAbove)("alignRight", ctx_r3.mentionDropdownAlignRight)("useFixedPositioning", true)("visible", true);
 } }
 /**
  * ContentEditable-based mention editor with visual chips/pills
@@ -70,6 +70,7 @@ function MentionEditorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
  */
 export class MentionEditorComponent {
     cdr;
+    hostRef;
     editorRef;
     placeholder = 'Type @ to mention agents or users, # for entities...';
     disabled = false;
@@ -112,10 +113,32 @@ export class MentionEditorComponent {
     mentionSuggestions = [];
     mentionDropdownPosition = { top: 0, left: 0 };
     mentionDropdownShowAbove = false;
+    /** Right-align the dropdown against its anchor. Only the button path sets this. */
+    mentionDropdownAlignRight = false;
     mentionStartIndex = -1;
     mentionQuery = '';
     /** The trigger char that opened the current mention dropdown */
     activeTrigger = '@';
+    /**
+     * Set while a dropdown was opened by {@link OpenTrigger} rather than by typing.
+     *
+     * In this mode the trigger character is NOT in the editor — there is nothing to strip on
+     * dismissal, and nothing for the user to see until they pick something. It also changes how the
+     * query and the chip insertion are measured, since neither can anchor on a character that is not
+     * there; {@link virtualTriggerBaseline} stands in for it.
+     */
+    virtualTriggerOpen = false;
+    /** Text length at the moment a virtual trigger opened — the origin for its query and deletion. */
+    virtualTriggerBaseline = 0;
+    /**
+     * The control that opened a virtual trigger, used to anchor the dropdown to it.
+     *
+     * STICKY for the whole session on purpose. `positionMentionDropdown()` re-runs on every keystroke
+     * while the user filters, and once there is text the caret measures real coordinates — so
+     * anchoring only on first paint would open at the button and then jump to the far-left caret on
+     * the first keypress, which is worse than not anchoring at all.
+     */
+    virtualTriggerAnchor = null;
     /**
      * Monotonic sequence guarding the async suggestion fetch — a response only applies
      * when no newer keystroke (or dropdown close) has superseded it.
@@ -149,8 +172,39 @@ export class MentionEditorComponent {
     onTouched = () => { };
     /** Value written via writeValue() before the view (editorRef) exists — applied in ngAfterViewInit. */
     pendingWriteValue = null;
-    constructor(cdr) {
+    constructor(cdr, hostRef) {
         this.cdr = cdr;
+        this.hostRef = hostRef;
+    }
+    /**
+     * Close the dropdown when the pointer goes down anywhere outside it.
+     *
+     * Dismissal previously relied entirely on the editor's blur, which is not enough: clicking a
+     * non-focusable area (the message list, page background) does not blur a contenteditable, so the
+     * dropdown stayed open with nothing to close it. That was always true for a typed trigger; the
+     * Skills button makes it easy to hit, because the button deliberately keeps focus in the editor
+     * so the user's next click is the FIRST thing that could dismiss it.
+     *
+     * `mousedown` rather than `click`: it fires before the browser moves focus, so this decides
+     * before blur's own 200ms timer gets involved and the two cannot race.
+     *
+     * The dropdown renders with fixed positioning but stays inside this component's host, so the
+     * containment check covers a click on a suggestion row — which must select, not dismiss.
+     */
+    onDocumentMouseDown(event) {
+        // Also fires for a press still awaiting suggestions: on a cold session the provider load takes
+        // hundreds of ms, and without this the user's dismissing click is ignored and the menu pops
+        // open afterwards, unbidden. closeMentionDropdown bumps the request sequence, which drops the
+        // in-flight response.
+        if (!this.showMentionDropdown && !this.virtualTriggerOpen) {
+            return;
+        }
+        const target = event.target;
+        if (target && this.hostRef.nativeElement.contains(target)) {
+            return;
+        }
+        this.closeMentionDropdown();
+        this.cdr.markForCheck();
     }
     async ngOnInit() {
         // Warm up the active providers (best-effort — a provider that fails to warm
@@ -220,7 +274,7 @@ export class MentionEditorComponent {
         // Close dropdown when editor loses focus
         // Use setTimeout to allow mousedown events on dropdown to fire first
         setTimeout(() => {
-            if (this.showMentionDropdown) {
+            if (this.showMentionDropdown || this.virtualTriggerOpen) {
                 this.closeMentionDropdown();
             }
         }, 200);
@@ -272,9 +326,16 @@ export class MentionEditorComponent {
      * Handle keydown events
      */
     onKeyDown(event) {
-        // Enter alone: Send message (if dropdown not showing)
-        if (event.key === 'Enter' && !event.shiftKey && !this.showMentionDropdown) {
+        // Enter alone: Send message. The dropdown only earns Enter when it has something to pick. A
+        // button-opened menu stays open on an empty result set (so the press is not a silent no-op),
+        // which made "showing but empty" reachable for the first time — and there Enter was neither
+        // handled nor prevented, so it fell through to the contenteditable and inserted a newline
+        // instead of sending.
+        if (event.key === 'Enter' && !event.shiftKey && (!this.showMentionDropdown || this.mentionSuggestions.length === 0)) {
             event.preventDefault();
+            if (this.showMentionDropdown) {
+                this.closeMentionDropdown();
+            }
             const plainText = this.getPlainText();
             this.enterPressed.emit(plainText);
             return;
@@ -305,16 +366,33 @@ export class MentionEditorComponent {
         const range = selection.getRangeAt(0);
         const textBeforeCursor = this.getTextBeforeCursor(range);
         // Find the nearest active trigger char before the cursor — whichever is closest wins
+        // A button-opened session only recognises trigger characters typed AFTER it opened. Without
+        // this floor the scan runs over the whole message, so a URL ('.../docs'), an email ('a@b.io')
+        // or a date ('9/11') already in the box is found instead, and the first keystroke either closes
+        // the menu the button just opened or filters it by the wrong query. searchFrom is 0 on the
+        // typed path, which leaves that path's behaviour byte-for-byte unchanged.
+        const searchFrom = this.virtualTriggerOpen ? this.virtualTriggerBaseline : 0;
         let triggerIndex = -1;
         let triggerChar = '@';
         for (const t of activeTriggers) {
             const idx = textBeforeCursor.lastIndexOf(t);
-            if (idx > triggerIndex) {
+            if (idx >= searchFrom && idx > triggerIndex) {
                 triggerIndex = idx;
                 triggerChar = t;
             }
         }
         if (triggerIndex === -1) {
+            // A virtual trigger has no character in the text, so the search above finds nothing. Keep it
+            // open and measure the query from where it opened, otherwise the first keystroke after
+            // clicking the button would dismiss the list the button just produced.
+            if (this.virtualTriggerOpen && textBeforeCursor.length >= this.virtualTriggerBaseline) {
+                const query = textBeforeCursor.substring(this.virtualTriggerBaseline);
+                if (!query.includes(' ')) {
+                    this.mentionQuery = query;
+                    void this.fetchSuggestions(this.activeTrigger, query);
+                    return;
+                }
+            }
             this.closeMentionDropdown();
             return;
         }
@@ -324,6 +402,15 @@ export class MentionEditorComponent {
             this.closeMentionDropdown();
             return;
         }
+        // A real trigger character now owns the session, so the virtual one must let go: otherwise
+        // chip insertion still takes the virtual branch and deletes only the typed tail, orphaning the
+        // trigger text, and the menu stays pinned to the button instead of the caret.
+        if (this.virtualTriggerOpen) {
+            this.virtualTriggerOpen = false;
+            this.virtualTriggerBaseline = 0;
+            this.virtualTriggerAnchor = null;
+            this.mentionDropdownAlignRight = false;
+        }
         // Extract query
         this.mentionQuery = textAfterTrigger;
         this.mentionStartIndex = triggerIndex;
@@ -355,6 +442,14 @@ export class MentionEditorComponent {
             this.showMentionDropdown = true;
             this.positionMentionDropdown();
         }
+        else if (this.virtualTriggerOpen) {
+            // A button press must never be a silent no-op. Closing on empty results is right for a TYPED
+            // trigger (the user is mid-word and nothing matched yet), but a host with zero skills clicking
+            // the button would get no feedback at all and read it as broken. Staying open surfaces the
+            // dropdown's own empty state, which was otherwise unreachable.
+            this.showMentionDropdown = true;
+            this.positionMentionDropdown();
+        }
         else {
             this.closeMentionDropdown();
         }
@@ -382,17 +477,37 @@ export class MentionEditorComponent {
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0)
             return;
+        // A button-opened trigger anchors to the BUTTON, not the caret. On the typed path the user's
+        // eyes and query are at the caret so the caret is right; on the button path nobody is looking at
+        // the caret, they are looking at the control they just pressed. Sticky for the session (see
+        // virtualTriggerAnchor) so filtering does not yank the menu to the caret on the first keystroke.
+        if (this.virtualTriggerOpen && this.virtualTriggerAnchor) {
+            this.positionToAnchor(this.virtualTriggerAnchor, containerRect);
+            return;
+        }
         const range = selection.getRangeAt(0);
-        const cursorRect = range.getBoundingClientRect();
+        let cursorRect = range.getBoundingClientRect();
+        // A collapsed range in an EMPTY editor measures 0x0 at 0,0 in every browser, which pinned the
+        // dropdown to the bottom-left corner of the viewport and ran it off screen. Rare while typing
+        // (there is text to measure) but the normal case when a BUTTON opens the trigger on an empty
+        // composer. Fall back to the editor's own box so the menu lands over the composer either way.
+        if (cursorRect.width === 0 && cursorRect.height === 0 && cursorRect.top === 0 && cursorRect.left === 0) {
+            const editorRect = editor.getBoundingClientRect();
+            cursorRect = editorRect;
+        }
         // Check space below vs above
         const spaceBelow = window.innerHeight - cursorRect.bottom;
         const spaceAbove = cursorRect.top;
         const dropdownHeight = Math.min(this.mentionSuggestions.length * 56, 300);
-        this.mentionDropdownShowAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+        // Prefer ABOVE. The composer sits at the bottom of the chat, so a dropdown that grows downward
+        // lands on top of the very text being typed. Below is the fallback for the rare host that
+        // mounts the composer high in a tall viewport.
+        this.mentionDropdownAlignRight = false;
+        this.mentionDropdownShowAbove = spaceAbove >= dropdownHeight || spaceAbove > spaceBelow;
         if (this.mentionDropdownShowAbove) {
             // Position above, aligning with container top if possible
             this.mentionDropdownPosition = {
-                top: containerRect ? containerRect.top + window.scrollY : cursorRect.top + window.scrollY - 4,
+                top: (containerRect ? containerRect.top : cursorRect.top) + window.scrollY - 8,
                 left: cursorRect.left + window.scrollX
             };
         }
@@ -404,6 +519,66 @@ export class MentionEditorComponent {
             };
         }
     }
+    /**
+     * Right-align the dropdown above a trigger control, matching where the voice-options picker puts
+     * its popover so two buttons in the same strip do not open menus on opposite corners.
+     *
+     * Right alignment is applied as a transform in CSS (`align-right`) rather than computed here,
+     * because the dropdown's width is content-based; `left` is still clamped so no anchor position can
+     * push it off the left edge on a narrow viewport.
+     */
+    positionToAnchor(anchor, containerRect) {
+        const GUTTER = 16;
+        const rect = anchor.getBoundingClientRect();
+        // The dropdown is rendered with `useFixedPositioning`, so `top`/`left` are VIEWPORT coordinates.
+        // Never add window.scrollX/scrollY here — getBoundingClientRect is already viewport-relative, and
+        // adding scroll converts to document coordinates, which under `position: fixed` drags the menu
+        // off by exactly the scroll offset.
+        // HORIZONTAL. Align the box's LEFT edge to the button's left edge and let it grow rightward.
+        // Right-alignment is wrong for this control: the Skills button sits in `.attach-buttons` on the
+        // LEFT of the composer, so pinning the box's right edge to the button's right edge sends a
+        // 280-400px menu off the left of the screen, and clamping it back parks it over the middle of
+        // the composer. Flip to right-aligned only when growing right would overflow the viewport,
+        // which is what a menu anchored to a right-hand control needs.
+        const assumedWidth = Math.min(400, window.innerWidth - GUTTER * 2);
+        const overflowsRight = rect.left + assumedWidth > window.innerWidth - GUTTER;
+        this.mentionDropdownAlignRight = overflowsRight;
+        // align-right shifts the box back by its own width, so `left` is then its RIGHT edge; otherwise
+        // `left` is its left edge. Clamp both forms inside the gutter.
+        //
+        // When flipping, align to the CONTAINER's right edge, not the button's. `.attach-buttons` is
+        // pinned to the composer's bottom-right and Skills is the leftmost of five icons, so pinning the
+        // box to that one button's right edge hangs its whole 400px body out to the left of the icon the
+        // user pressed. Aligning to the composer instead puts the menu above the button cluster, which is
+        // what "above the button" means when the menu is ten times the button's width.
+        const flippedRightEdge = containerRect
+            ? Math.min(containerRect.right, window.innerWidth - GUTTER)
+            : Math.min(rect.right, window.innerWidth - GUTTER);
+        const left = overflowsRight
+            ? Math.max(assumedWidth + GUTTER, flippedRightEdge)
+            : Math.min(Math.max(GUTTER, rect.left), window.innerWidth - GUTTER - assumedWidth);
+        // VERTICAL. Prefer the composer's top edge so the menu clears the whole input box rather than
+        // overlapping the text the user is composing; fall back to the button when there is no container.
+        // Not unconditional: `show-above` lifts the box by its own height, so forcing it where there is
+        // no room renders it off the top of the viewport where it cannot be reached.
+        const anchorTop = containerRect ? containerRect.top : rect.top;
+        const dropdownHeight = Math.min(Math.max(this.mentionSuggestions.length, 1) * 56, 300);
+        // Prefer above, but when it does not fit, take whichever side has MORE room rather than
+        // dropping below unconditionally — the composer is bottom-docked, so below is usually the worse
+        // side. In a short viewport (a popped-out chat, or mobile with the keyboard up) that difference
+        // is the whole menu versus a clipped sliver.
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const showAbove = anchorTop >= dropdownHeight + GUTTER || anchorTop > spaceBelow;
+        this.mentionDropdownShowAbove = showAbove;
+        // Above: `top` is the box's BOTTOM edge (the transform lifts it). Below: it is the top edge.
+        // Clamped either way, because dropdownHeight is an estimate (rows with descriptions run taller
+        // than 56px) and an underestimate would otherwise clip the first row off the top of the screen.
+        const rawTop = showAbove ? anchorTop - 8 : rect.bottom + 8;
+        const top = showAbove
+            ? Math.max(GUTTER + dropdownHeight, Math.min(rawTop, window.innerHeight - GUTTER))
+            : Math.max(GUTTER, Math.min(rawTop, window.innerHeight - GUTTER - dropdownHeight));
+        this.mentionDropdownPosition = { top, left };
+    }
     /**
      * Handle mention selection from dropdown
      */
@@ -446,6 +621,61 @@ export class MentionEditorComponent {
         }
         return true;
     }
+    /**
+     * Open the suggestion dropdown for a trigger character, exactly as if the user had typed it.
+     *
+     * Exists so a trigger can have a BUTTON as well as a keystroke. `/` commands were previously
+     * reachable only by knowing to type `/`, which is not an affordance — nothing on screen says the
+     * feature is there.
+     *
+     * Deliberately inserts the character and re-runs the normal input path rather than opening the
+     * dropdown directly. Everything downstream (which providers own the char, permission filtering,
+     * the query the user then types, replacing the char with the chosen chip) is already driven by
+     * that path; short-circuiting it would fork the flow and leave `mentionStartIndex` /
+     * `activeTrigger` unset, so the first selection would insert in the wrong place.
+     *
+     * @returns false when the editor is disabled, unavailable, or no active provider owns the char.
+     */
+    OpenTrigger(triggerChar, anchorEl) {
+        const editor = this.editorRef?.nativeElement;
+        if (!editor || this.disabled) {
+            return false;
+        }
+        if (!this.mentionTriggers.includes(triggerChar)) {
+            return false;
+        }
+        if (!this.FocusCaretAtEnd()) {
+            return false;
+        }
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return false;
+        }
+        // NOTHING is written into the editor. An earlier version inserted the trigger character to
+        // reuse the typed path, and cleaned it up on dismissal — but a character the user never typed,
+        // appearing and then vanishing, is visible churn in their own message. The dropdown is opened
+        // directly instead, and the character only ever exists as the chip the user chooses.
+        this.virtualTriggerOpen = true;
+        this.virtualTriggerAnchor = anchorEl ?? null;
+        this.virtualTriggerBaseline = this.getTextBeforeCursor(selection.getRangeAt(0)).length;
+        this.activeTrigger = triggerChar;
+        this.mentionQuery = '';
+        void this.fetchSuggestions(triggerChar, '');
+        return true;
+    }
+    /**
+     * True when the suggestion dropdown is open FOR THIS trigger character.
+     *
+     * Lets a control that opens a trigger render its own pressed state without duplicating the
+     * editor's state. Both halves matter: `showMentionDropdown` alone would light the Skills button
+     * while an unrelated `@` mention dropdown is open.
+     */
+    IsTriggerOpen(triggerChar) {
+        // virtualTriggerOpen covers the window between the press and the provider's response. Reporting
+        // "closed" there makes the second press of a quick double-click re-run the open path instead of
+        // toggling, re-emitting the Before/After pair.
+        return (this.showMentionDropdown || this.virtualTriggerOpen) && this.activeTrigger === triggerChar;
+    }
     /** True when keyboard focus currently sits inside this editor. */
     get HasFocus() {
         const editor = this.editorRef?.nativeElement;
@@ -486,12 +716,17 @@ export class MentionEditorComponent {
         if (!selection || selection.rangeCount === 0)
             return;
         const range = selection.getRangeAt(0);
-        // Delete the trigger + query text (use the active trigger char)
+        // Delete the trigger + query text (use the active trigger char). A VIRTUAL trigger has no
+        // character in the editor, so the span to remove is only what the user typed since it opened —
+        // anchoring on the trigger char here would delete an unrelated earlier one, or nothing.
         const textBeforeCursor = this.getTextBeforeCursor(range);
-        const lastAtIndex = textBeforeCursor.lastIndexOf(this.activeTrigger);
-        const deleteLength = textBeforeCursor.length - lastAtIndex;
-        range.setStart(range.startContainer, range.startOffset - deleteLength);
-        range.deleteContents();
+        const deleteLength = this.virtualTriggerOpen
+            ? Math.max(0, textBeforeCursor.length - this.virtualTriggerBaseline)
+            : textBeforeCursor.length - textBeforeCursor.lastIndexOf(this.activeTrigger);
+        if (deleteLength > 0) {
+            range.setStart(range.startContainer, range.startOffset - deleteLength);
+            range.deleteContents();
+        }
         // Create mention chip element
         const chip = this.createMentionChip(suggestion);
         // Insert chip
@@ -855,6 +1090,12 @@ export class MentionEditorComponent {
      * Close mention dropdown
      */
     closeMentionDropdown() {
+        // No text cleanup: a virtual trigger never wrote anything into the editor, which is the whole
+        // point of it. Dismissing leaves the message exactly as the user left it.
+        this.virtualTriggerOpen = false;
+        this.virtualTriggerBaseline = 0;
+        this.virtualTriggerAnchor = null;
+        this.mentionDropdownAlignRight = false;
         // Invalidate any in-flight suggestion fetch so a late response can't reopen the dropdown
         this.suggestionRequestSeq++;
         this.showMentionDropdown = false;
@@ -1427,19 +1668,21 @@ export class MentionEditorComponent {
         input.onchange = (e) => this.onFileSelected(e);
         input.click();
     }
-    static ɵfac = function MentionEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MentionEditorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function MentionEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MentionEditorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     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);
+        } }, hostBindings: function MentionEditorComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("mousedown", function MentionEditorComponent_mousedown_HostBindingHandler($event) { return ctx.onDocumentMouseDown($event); }, i0.ɵɵresolveDocument);
         } }, inputs: { placeholder: "placeholder", disabled: "disabled", currentUser: "currentUser", enableMentions: "enableMentions", TriggerProviders: "TriggerProviders", ExcludedTriggerKeys: "ExcludedTriggerKeys", Provider: "Provider", autoFocus: "autoFocus", enableAttachments: "enableAttachments", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes" }, outputs: { valueChange: "valueChange", mentionSelected: "mentionSelected", enterPressed: "enterPressed", attachmentsChanged: "attachmentsChanged", attachmentError: "attachmentError", attachmentClicked: "attachmentClicked", editorBlurred: "editorBlurred" }, standalone: false, features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => MentionEditorComponent),
                     multi: true
                 }
-            ])], decls: 6, vars: 7, consts: [["editor", ""], [1, "mention-editor-container", 3, "click", "dragover", "dragleave", "drop"], [1, "pending-attachments"], ["contenteditable", "true", 1, "mention-editor", 3, "input", "keydown", "blur", "paste"], [1, "drop-overlay"], [3, "suggestions", "position", "showAbove", "useFixedPositioning", "visible"], [1, "attachment-thumbnail"], [1, "attachment-thumbnail", 3, "click"], [1, "thumbnail-image", 3, "src", "alt"], [1, "thumbnail-placeholder"], ["title", "Remove attachment", 1, "remove-attachment", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-file"], [1, "file-name"], [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) {
+            ])], decls: 6, vars: 7, consts: [["editor", ""], [1, "mention-editor-container", 3, "click", "dragover", "dragleave", "drop"], [1, "pending-attachments"], ["contenteditable", "true", 1, "mention-editor", 3, "input", "keydown", "blur", "paste"], [1, "drop-overlay"], [3, "suggestions", "position", "showAbove", "alignRight", "useFixedPositioning", "visible"], [1, "attachment-thumbnail"], [1, "attachment-thumbnail", 3, "click"], [1, "thumbnail-image", 3, "src", "alt"], [1, "thumbnail-placeholder"], ["title", "Remove attachment", 1, "remove-attachment", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-file"], [1, "file-name"], [1, "drop-message"], [1, "fa-solid", "fa-cloud-arrow-up"], [3, "suggestionSelected", "closed", "suggestions", "position", "showAbove", "alignRight", "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)); })("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)); });
@@ -1448,7 +1691,7 @@ export class MentionEditorComponent {
             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.ɵɵconditionalCreate(4, MentionEditorComponent_Conditional_4_Template, 5, 0, "div", 4);
-            i0.ɵɵconditionalCreate(5, MentionEditorComponent_Conditional_5_Template, 1, 5, "mj-mention-dropdown", 5);
+            i0.ɵɵconditionalCreate(5, MentionEditorComponent_Conditional_5_Template, 1, 6, "mj-mention-dropdown", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassProp("drag-over", ctx.isDragOver);
@@ -1470,8 +1713,8 @@ export class MentionEditorComponent {
                         useExisting: forwardRef(() => MentionEditorComponent),
                         multi: true
                     }
-                ], 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  @if (pendingAttachments.length > 0) {\n    <div class=\"pending-attachments\">\n      @for (attachment of pendingAttachments; track attachment) {\n        <div class=\"attachment-thumbnail\"\n          (click)=\"onAttachmentClick(attachment)\">\n          @if (attachment.thumbnailUrl) {\n            <img\n              [src]=\"attachment.thumbnailUrl\"\n              [alt]=\"attachment.fileName\"\n              class=\"thumbnail-image\">\n          }\n          @if (!attachment.thumbnailUrl) {\n            <div class=\"thumbnail-placeholder\">\n              <i class=\"fa-solid fa-file\"></i>\n              <span class=\"file-name\">{{ attachment.fileName }}</span>\n            </div>\n          }\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      }\n    </div>\n  }\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  @if (isDragOver) {\n    <div class=\"drop-overlay\">\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\n  <!-- Mention Dropdown -->\n  @if (showMentionDropdown && enableMentions) {\n    <mj-mention-dropdown\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  }\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: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--mj-brand-primary);\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(--mj-text-muted);\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(--mj-bg-surface-sunken);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n::ng-deep .mention-chip:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n  transition: all 0.2s ease;\n}\n::ng-deep .mention-chip:focus, ::ng-deep .mention-chip.selected {\n  outline: 2px solid var(--mj-brand-primary);\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.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: color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n  border-radius: 3px;\n}\n.mention-editor::-webkit-scrollbar-thumb:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\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 color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\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: var(--mj-bg-surface-sunken);\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n\n.attachment-thumbnail:hover {\n  transform: scale(1.05);\n  box-shadow: var(--mj-shadow-lg);\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: var(--mj-text-secondary);\n}\n\n.thumbnail-placeholder i {\n  font-size: 24px;\n  margin-bottom: 4px;\n  color: var(--mj-text-muted);\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: color-mix(in srgb, var(--mj-text-primary) 60%, transparent);\n  color: var(--mj-text-inverse);\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: color-mix(in srgb, var(--mj-status-error) 90%, transparent);\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: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  backdrop-filter: blur(2px);\n  border: 2px dashed var(--mj-brand-primary);\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: var(--mj-brand-primary);\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"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { 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  @if (pendingAttachments.length > 0) {\n    <div class=\"pending-attachments\">\n      @for (attachment of pendingAttachments; track attachment) {\n        <div class=\"attachment-thumbnail\"\n          (click)=\"onAttachmentClick(attachment)\">\n          @if (attachment.thumbnailUrl) {\n            <img\n              [src]=\"attachment.thumbnailUrl\"\n              [alt]=\"attachment.fileName\"\n              class=\"thumbnail-image\">\n          }\n          @if (!attachment.thumbnailUrl) {\n            <div class=\"thumbnail-placeholder\">\n              <i class=\"fa-solid fa-file\"></i>\n              <span class=\"file-name\">{{ attachment.fileName }}</span>\n            </div>\n          }\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      }\n    </div>\n  }\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  @if (isDragOver) {\n    <div class=\"drop-overlay\">\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\n  <!-- Mention Dropdown -->\n  @if (showMentionDropdown && enableMentions) {\n    <mj-mention-dropdown\n      [suggestions]=\"mentionSuggestions\"\n      [position]=\"mentionDropdownPosition\"\n      [showAbove]=\"mentionDropdownShowAbove\"\n      [alignRight]=\"mentionDropdownAlignRight\"\n      [useFixedPositioning]=\"true\"\n      [visible]=\"true\"\n      (suggestionSelected)=\"onMentionSelected($event)\"\n      (closed)=\"closeMentionDropdown()\">\n    </mj-mention-dropdown>\n  }\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: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--mj-brand-primary);\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(--mj-text-muted);\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(--mj-bg-surface-sunken);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n::ng-deep .mention-chip:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n  transition: all 0.2s ease;\n}\n::ng-deep .mention-chip:focus, ::ng-deep .mention-chip.selected {\n  outline: 2px solid var(--mj-brand-primary);\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.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: color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n  border-radius: 3px;\n}\n.mention-editor::-webkit-scrollbar-thumb:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\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 color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\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: var(--mj-bg-surface-sunken);\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n\n.attachment-thumbnail:hover {\n  transform: scale(1.05);\n  box-shadow: var(--mj-shadow-lg);\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: var(--mj-text-secondary);\n}\n\n.thumbnail-placeholder i {\n  font-size: 24px;\n  margin-bottom: 4px;\n  color: var(--mj-text-muted);\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: color-mix(in srgb, var(--mj-text-primary) 60%, transparent);\n  color: var(--mj-text-inverse);\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: color-mix(in srgb, var(--mj-status-error) 90%, transparent);\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: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  backdrop-filter: blur(2px);\n  border: 2px dashed var(--mj-brand-primary);\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: var(--mj-brand-primary);\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"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { editorRef: [{
             type: ViewChild,
             args: ['editor', { static: false }]
         }], placeholder: [{
@@ -1512,6 +1755,9 @@ export class MentionEditorComponent {
             type: Output
         }], editorBlurred: [{
             type: Output
+        }], onDocumentMouseDown: [{
+            type: HostListener,
+            args: ['document:mousedown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MentionEditorComponent, { className: "MentionEditorComponent", filePath: "src/lib/components/mention/mention-editor.component.ts", lineNumber: 72 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MentionEditorComponent, { className: "MentionEditorComponent", filePath: "src/lib/components/mention/mention-editor.component.ts", lineNumber: 73 }); })();
 //# sourceMappingURL=mention-editor.component.js.map