@memberjunction/ng-composer 6.2.0-edge.0 → 6.2.0-edge.2

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

@@ -71,12 +71,52 @@ 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;
-    currentUser;
+    EditorRef;
+    /** @deprecated Use {@link EditorRef}. */
+    get editorRef() {
+        return this.EditorRef;
+    }
+    /** @deprecated Use {@link EditorRef}. */
+    set editorRef(value) {
+        this.EditorRef = value;
+    }
+    Placeholder = 'Type @ to mention agents or users, # for entities...';
+    /** @deprecated Use {@link Placeholder}. */
+    set placeholder(value) {
+        this.Placeholder = value;
+    }
+    /** @deprecated Use {@link Placeholder}. */
+    get placeholder() {
+        return this.Placeholder;
+    }
+    Disabled = false;
+    /** @deprecated Use {@link Disabled}. */
+    set disabled(value) {
+        this.Disabled = value;
+    }
+    /** @deprecated Use {@link Disabled}. */
+    get disabled() {
+        return this.Disabled;
+    }
+    CurrentUser;
+    /** @deprecated Use {@link CurrentUser}. */
+    set currentUser(value) {
+        this.CurrentUser = value;
+    }
+    /** @deprecated Use {@link CurrentUser}. */
+    get currentUser() {
+        return this.CurrentUser;
+    }
     /** Master switch for all mention/command triggers. When false no providers are consulted. */
-    enableMentions = true;
+    EnableMentions = true;
+    /** @deprecated Use {@link EnableMentions}. */
+    set enableMentions(value) {
+        this.EnableMentions = value;
+    }
+    /** @deprecated Use {@link EnableMentions}. */
+    get enableMentions() {
+        return this.EnableMentions;
+    }
     /**
      * Explicit trigger-provider list — when bound, EXACTLY these providers are active
      * (explicit list wins over discovery). Leave null to discover providers registered
@@ -91,30 +131,182 @@ export class MentionEditorComponent {
     /** Optional metadata provider scoping this editor (multi-provider hosts); passed through to trigger providers. */
     Provider = null;
     /** Auto-focus the editor after view init (the composer default). Disable when embedded in forms. */
-    autoFocus = true;
+    AutoFocus = true;
+    /** @deprecated Use {@link AutoFocus}. */
+    set autoFocus(value) {
+        this.AutoFocus = value;
+    }
+    /** @deprecated Use {@link AutoFocus}. */
+    get autoFocus() {
+        return this.AutoFocus;
+    }
     // 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();
+    EnableAttachments = true;
+    /** @deprecated Use {@link EnableAttachments}. */
+    set enableAttachments(value) {
+        this.EnableAttachments = value;
+    }
+    /** @deprecated Use {@link EnableAttachments}. */
+    get enableAttachments() {
+        return this.EnableAttachments;
+    }
+    MaxAttachments = 10;
+    /** @deprecated Use {@link MaxAttachments}. */
+    set maxAttachments(value) {
+        this.MaxAttachments = value;
+    }
+    /** @deprecated Use {@link MaxAttachments}. */
+    get maxAttachments() {
+        return this.MaxAttachments;
+    }
+    MaxAttachmentSizeBytes = 20 * 1024 * 1024;
+    /** @deprecated Use {@link MaxAttachmentSizeBytes}. */
+    set maxAttachmentSizeBytes(value) {
+        this.MaxAttachmentSizeBytes = value;
+    }
+    /** @deprecated Use {@link MaxAttachmentSizeBytes}. */
+    get maxAttachmentSizeBytes() {
+        return this.MaxAttachmentSizeBytes;
+    } // 20MB default
+    AcceptedFileTypes = 'image/*';
+    /** @deprecated Use {@link AcceptedFileTypes}. */
+    set acceptedFileTypes(value) {
+        this.AcceptedFileTypes = value;
+    }
+    /** @deprecated Use {@link AcceptedFileTypes}. */
+    get acceptedFileTypes() {
+        return this.AcceptedFileTypes;
+    } // MIME types to accept
+    ValueChange = new EventEmitter();
+    /**
+     * @deprecated Use {@link ValueChange}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (valueChange) keeps working. Must stay AFTER ValueChange: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    valueChange = this.ValueChange;
+    MentionSelected = new EventEmitter();
+    /**
+     * @deprecated Use {@link MentionSelected}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (mentionSelected) keeps working. Must stay AFTER MentionSelected: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    mentionSelected = this.MentionSelected;
+    EnterPressed = new EventEmitter();
+    /**
+     * @deprecated Use {@link EnterPressed}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (enterPressed) keeps working. Must stay AFTER EnterPressed: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    enterPressed = this.EnterPressed;
+    AttachmentsChanged = new EventEmitter();
+    /**
+     * @deprecated Use {@link AttachmentsChanged}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (attachmentsChanged) keeps working. Must stay AFTER AttachmentsChanged: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    attachmentsChanged = this.AttachmentsChanged;
+    AttachmentError = new EventEmitter();
+    /**
+     * @deprecated Use {@link AttachmentError}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (attachmentError) keeps working. Must stay AFTER AttachmentError: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    attachmentError = this.AttachmentError;
+    AttachmentClicked = new EventEmitter();
+    /**
+     * @deprecated Use {@link AttachmentClicked}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (attachmentClicked) keeps working. Must stay AFTER AttachmentClicked: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    attachmentClicked = this.AttachmentClicked;
     /** Fires when the contenteditable loses focus (hosts persist drafts on this). */
-    editorBlurred = new EventEmitter();
+    EditorBlurred = new EventEmitter();
+    /**
+     * @deprecated Use {@link EditorBlurred}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (editorBlurred) keeps working. Must stay AFTER EditorBlurred: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    editorBlurred = this.EditorBlurred;
     // Pending attachments state
-    pendingAttachments = [];
-    isDragOver = false;
+    PendingAttachments = [];
+    /** @deprecated Use {@link PendingAttachments}. */
+    get pendingAttachments() {
+        return this.PendingAttachments;
+    }
+    /** @deprecated Use {@link PendingAttachments}. */
+    set pendingAttachments(value) {
+        this.PendingAttachments = value;
+    }
+    IsDragOver = false;
+    /** @deprecated Use {@link IsDragOver}. */
+    get isDragOver() {
+        return this.IsDragOver;
+    }
+    /** @deprecated Use {@link IsDragOver}. */
+    set isDragOver(value) {
+        this.IsDragOver = value;
+    }
     // Mention dropdown state
-    showMentionDropdown = false;
-    mentionSuggestions = [];
-    mentionDropdownPosition = { top: 0, left: 0 };
-    mentionDropdownShowAbove = false;
+    ShowMentionDropdown = false;
+    /** @deprecated Use {@link ShowMentionDropdown}. */
+    get showMentionDropdown() {
+        return this.ShowMentionDropdown;
+    }
+    /** @deprecated Use {@link ShowMentionDropdown}. */
+    set showMentionDropdown(value) {
+        this.ShowMentionDropdown = value;
+    }
+    MentionSuggestions = [];
+    /** @deprecated Use {@link MentionSuggestions}. */
+    get mentionSuggestions() {
+        return this.MentionSuggestions;
+    }
+    /** @deprecated Use {@link MentionSuggestions}. */
+    set mentionSuggestions(value) {
+        this.MentionSuggestions = value;
+    }
+    MentionDropdownPosition = { top: 0, left: 0 };
+    /** @deprecated Use {@link MentionDropdownPosition}. */
+    get mentionDropdownPosition() {
+        return this.MentionDropdownPosition;
+    }
+    /** @deprecated Use {@link MentionDropdownPosition}. */
+    set mentionDropdownPosition(value) {
+        this.MentionDropdownPosition = value;
+    }
+    MentionDropdownShowAbove = false;
+    /** @deprecated Use {@link MentionDropdownShowAbove}. */
+    get mentionDropdownShowAbove() {
+        return this.MentionDropdownShowAbove;
+    }
+    /** @deprecated Use {@link MentionDropdownShowAbove}. */
+    set mentionDropdownShowAbove(value) {
+        this.MentionDropdownShowAbove = value;
+    }
     /** Right-align the dropdown against its anchor. Only the button path sets this. */
-    mentionDropdownAlignRight = false;
+    MentionDropdownAlignRight = false;
+    /** @deprecated Use {@link MentionDropdownAlignRight}. */
+    get mentionDropdownAlignRight() {
+        return this.MentionDropdownAlignRight;
+    }
+    /** @deprecated Use {@link MentionDropdownAlignRight}. */
+    set mentionDropdownAlignRight(value) {
+        this.MentionDropdownAlignRight = value;
+    }
     mentionStartIndex = -1;
     mentionQuery = '';
     /** The trigger char that opened the current mention dropdown */
@@ -145,7 +337,7 @@ export class MentionEditorComponent {
      */
     suggestionRequestSeq = 0;
     /** Cap on the suggestions displayed; passed to providers as `MaxResults`. */
-    static MaxSuggestions = 50;
+    static maxSuggestions = 50;
     /**
      * The trigger providers this editor consults: the explicit `TriggerProviders` list
      * when bound, otherwise ClassFactory discovery filtered by `ExcludedTriggerKeys`.
@@ -153,7 +345,7 @@ export class MentionEditorComponent {
      * behaves as a plain text editor.
      */
     get activeProviders() {
-        if (!this.enableMentions) {
+        if (!this.EnableMentions) {
             return [];
         }
         return this.TriggerProviders ?? DiscoverComposerTriggerProviders(this.ExcludedTriggerKeys);
@@ -169,7 +361,15 @@ export class MentionEditorComponent {
         return triggers;
     }
     onChange = () => { };
-    onTouched = () => { };
+    OnTouched = () => { };
+    /** @deprecated Use {@link OnTouched}. */
+    get onTouched() {
+        return this.OnTouched;
+    }
+    /** @deprecated Use {@link OnTouched}. */
+    set onTouched(value) {
+        this.OnTouched = value;
+    }
     /** Value written via writeValue() before the view (editorRef) exists — applied in ngAfterViewInit. */
     pendingWriteValue = null;
     constructor(cdr, hostRef) {
@@ -196,21 +396,21 @@ export class MentionEditorComponent {
         // 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) {
+        if (!this.ShowMentionDropdown && !this.virtualTriggerOpen) {
             return;
         }
         const target = event.target;
         if (target && this.hostRef.nativeElement.contains(target)) {
             return;
         }
-        this.closeMentionDropdown();
+        this.CloseMentionDropdown();
         this.cdr.markForCheck();
     }
     async ngOnInit() {
         // Warm up the active providers (best-effort — a provider that fails to warm
         // simply serves its first real request cold).
-        if (this.enableMentions) {
-            const user = this.currentUser ?? null;
+        if (this.EnableMentions) {
+            const user = this.CurrentUser ?? null;
             await Promise.all(this.activeProviders.map((p) => p.Initialize(user).catch(() => undefined)));
         }
     }
@@ -222,18 +422,18 @@ export class MentionEditorComponent {
             this.pendingWriteValue = null;
         }
         // Auto-focus the editor
-        if (this.autoFocus) {
+        if (this.AutoFocus) {
             setTimeout(() => {
-                this.editorRef?.nativeElement?.focus();
+                this.EditorRef?.nativeElement?.focus();
             }, 100);
         }
     }
     /**
      * Handle clicks on the container - focus the editor if clicking outside the contentEditable
      */
-    onContainerClick(event) {
+    OnContainerClick(event) {
         const target = event.target;
-        const editor = this.editorRef?.nativeElement;
+        const editor = this.EditorRef?.nativeElement;
         // Don't handle clicks on the dropdown or its children
         if (target.closest('mj-mention-dropdown')) {
             return;
@@ -252,39 +452,51 @@ export class MentionEditorComponent {
             }
         }
     }
+    /** @deprecated Use {@link OnContainerClick}. */
+    onContainerClick(event) {
+        return this.OnContainerClick(event);
+    }
     /**
      * Handle input changes in contentEditable
      */
-    onInput() {
+    OnInput() {
         const plainText = this.getPlainText();
         this.onChange(plainText);
-        this.valueChange.emit(plainText);
+        this.ValueChange.emit(plainText);
         // Handle mention/command autocomplete via the active trigger providers
-        if (this.enableMentions) {
+        if (this.EnableMentions) {
             this.handleMentionInput();
         }
     }
+    /** @deprecated Use {@link OnInput}. */
+    onInput() {
+        return this.OnInput();
+    }
     /**
      * Handle blur event - close dropdown when editor loses focus
      */
-    onBlur() {
+    OnBlur() {
         // Call form control touched callback
-        this.onTouched();
-        this.editorBlurred.emit();
+        this.OnTouched();
+        this.EditorBlurred.emit();
         // Close dropdown when editor loses focus
         // Use setTimeout to allow mousedown events on dropdown to fire first
         setTimeout(() => {
-            if (this.showMentionDropdown || this.virtualTriggerOpen) {
-                this.closeMentionDropdown();
+            if (this.ShowMentionDropdown || this.virtualTriggerOpen) {
+                this.CloseMentionDropdown();
             }
         }, 200);
     }
+    /** @deprecated Use {@link OnBlur}. */
+    onBlur() {
+        return this.OnBlur();
+    }
     /**
      * Handle paste event - images or plain text
      */
-    onPaste(event) {
+    OnPaste(event) {
         // Check for image data in clipboard
-        if (this.enableAttachments && event.clipboardData?.items) {
+        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) {
@@ -320,24 +532,28 @@ export class MentionEditorComponent {
         selection.removeAllRanges();
         selection.addRange(range);
         // Trigger input event to update model
-        this.onInput();
+        this.OnInput();
+    }
+    /** @deprecated Use {@link OnPaste}. */
+    onPaste(event) {
+        return this.OnPaste(event);
     }
     /**
      * Handle keydown events
      */
-    onKeyDown(event) {
+    OnKeyDown(event) {
         // 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)) {
+        if (event.key === 'Enter' && !event.shiftKey && (!this.ShowMentionDropdown || this.MentionSuggestions.length === 0)) {
             event.preventDefault();
-            if (this.showMentionDropdown) {
-                this.closeMentionDropdown();
+            if (this.ShowMentionDropdown) {
+                this.CloseMentionDropdown();
             }
             const plainText = this.getPlainText();
-            this.enterPressed.emit(plainText);
+            this.EnterPressed.emit(plainText);
             return;
         }
         // Backspace: Check if deleting a mention chip
@@ -345,11 +561,15 @@ export class MentionEditorComponent {
             this.handleBackspace(event);
         }
         // Handle mention dropdown navigation
-        if (this.showMentionDropdown) {
+        if (this.ShowMentionDropdown) {
             // Let the dropdown handle arrow keys, enter, escape
             // (We'll pass these through to mention-dropdown component)
         }
     }
+    /** @deprecated Use {@link OnKeyDown}. */
+    onKeyDown(event) {
+        return this.OnKeyDown(event);
+    }
     /**
      * Handle mention/command trigger detection — finds the nearest active trigger char
      * before the cursor and kicks off the (async) provider suggestion fetch.
@@ -360,7 +580,7 @@ export class MentionEditorComponent {
             return;
         const activeTriggers = this.mentionTriggers;
         if (activeTriggers.length === 0) {
-            this.closeMentionDropdown();
+            this.CloseMentionDropdown();
             return;
         }
         const range = selection.getRangeAt(0);
@@ -393,13 +613,13 @@ export class MentionEditorComponent {
                     return;
                 }
             }
-            this.closeMentionDropdown();
+            this.CloseMentionDropdown();
             return;
         }
         // Check if there's a space between the trigger and cursor (means mention was completed)
         const textAfterTrigger = textBeforeCursor.substring(triggerIndex + 1);
         if (textAfterTrigger.includes(' ')) {
-            this.closeMentionDropdown();
+            this.CloseMentionDropdown();
             return;
         }
         // A real trigger character now owns the session, so the virtual one must let go: otherwise
@@ -409,7 +629,7 @@ export class MentionEditorComponent {
             this.virtualTriggerOpen = false;
             this.virtualTriggerBaseline = 0;
             this.virtualTriggerAnchor = null;
-            this.mentionDropdownAlignRight = false;
+            this.MentionDropdownAlignRight = false;
         }
         // Extract query
         this.mentionQuery = textAfterTrigger;
@@ -428,18 +648,18 @@ export class MentionEditorComponent {
         const providers = this.activeProviders.filter((p) => p.TriggerChar === triggerChar);
         const request = {
             Query: query,
-            MaxResults: MentionEditorComponent.MaxSuggestions,
-            ContextUser: this.currentUser ?? null,
+            MaxResults: MentionEditorComponent.maxSuggestions,
+            ContextUser: this.CurrentUser ?? null,
             Provider: this.Provider
         };
         const resultSets = await Promise.all(providers.map((p) => p.GetSuggestions(request).catch(() => [])));
         if (seq !== this.suggestionRequestSeq) {
             return; // superseded by a newer keystroke or an explicit close
         }
-        const merged = resultSets.flat().slice(0, MentionEditorComponent.MaxSuggestions);
-        this.mentionSuggestions = merged;
+        const merged = resultSets.flat().slice(0, MentionEditorComponent.maxSuggestions);
+        this.MentionSuggestions = merged;
         if (merged.length > 0) {
-            this.showMentionDropdown = true;
+            this.ShowMentionDropdown = true;
             this.positionMentionDropdown();
         }
         else if (this.virtualTriggerOpen) {
@@ -447,11 +667,11 @@ export class MentionEditorComponent {
             // 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.ShowMentionDropdown = true;
             this.positionMentionDropdown();
         }
         else {
-            this.closeMentionDropdown();
+            this.CloseMentionDropdown();
         }
         this.cdr.detectChanges();
     }
@@ -460,7 +680,7 @@ export class MentionEditorComponent {
      */
     getTextBeforeCursor(range) {
         const tempRange = range.cloneRange();
-        tempRange.selectNodeContents(this.editorRef.nativeElement);
+        tempRange.selectNodeContents(this.EditorRef.nativeElement);
         tempRange.setEnd(range.startContainer, range.startOffset);
         return tempRange.toString();
     }
@@ -468,7 +688,7 @@ export class MentionEditorComponent {
      * Position the mention dropdown
      */
     positionMentionDropdown() {
-        const editor = this.editorRef?.nativeElement;
+        const editor = this.EditorRef?.nativeElement;
         if (!editor)
             return;
         // Get the parent container (message-input-box-container) for alignment
@@ -498,22 +718,22 @@ export class MentionEditorComponent {
         // Check space below vs above
         const spaceBelow = window.innerHeight - cursorRect.bottom;
         const spaceAbove = cursorRect.top;
-        const dropdownHeight = Math.min(this.mentionSuggestions.length * 56, 300);
+        const dropdownHeight = Math.min(this.MentionSuggestions.length * 56, 300);
         // 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) {
+        this.MentionDropdownAlignRight = false;
+        this.MentionDropdownShowAbove = spaceAbove >= dropdownHeight || spaceAbove > spaceBelow;
+        if (this.MentionDropdownShowAbove) {
             // Position above, aligning with container top if possible
-            this.mentionDropdownPosition = {
+            this.MentionDropdownPosition = {
                 top: (containerRect ? containerRect.top : cursorRect.top) + window.scrollY - 8,
                 left: cursorRect.left + window.scrollX
             };
         }
         else {
             // Position below cursor, but align bottom edge with container top
-            this.mentionDropdownPosition = {
+            this.MentionDropdownPosition = {
                 top: containerRect ? containerRect.top + window.scrollY : cursorRect.bottom + window.scrollY + 4,
                 left: cursorRect.left + window.scrollX
             };
@@ -542,7 +762,7 @@ export class MentionEditorComponent {
         // 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;
+        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.
         //
@@ -562,14 +782,14 @@ export class MentionEditorComponent {
         // 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);
+        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;
+        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.
@@ -577,20 +797,24 @@ export class MentionEditorComponent {
         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 };
+        this.MentionDropdownPosition = { top, left };
     }
     /**
      * Handle mention selection from dropdown
      */
-    onMentionSelected(suggestion) {
+    OnMentionSelected(suggestion) {
         this.insertMentionChip(suggestion);
-        this.closeMentionDropdown();
-        this.mentionSelected.emit(suggestion);
+        this.CloseMentionDropdown();
+        this.MentionSelected.emit(suggestion);
         // Refocus the editor after selection
         setTimeout(() => {
-            this.editorRef?.nativeElement?.focus();
+            this.EditorRef?.nativeElement?.focus();
         }, 50);
     }
+    /** @deprecated Use {@link OnMentionSelected}. */
+    onMentionSelected(suggestion) {
+        return this.OnMentionSelected(suggestion);
+    }
     /**
      * Insert a mention chip at the current cursor position
      */
@@ -606,7 +830,7 @@ export class MentionEditorComponent {
      */
     /** Focuses the editor and places the caret at the very end of its content. */
     FocusCaretAtEnd() {
-        const editor = this.editorRef?.nativeElement;
+        const editor = this.EditorRef?.nativeElement;
         if (!editor) {
             return false;
         }
@@ -637,8 +861,8 @@ export class MentionEditorComponent {
      * @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) {
+        const editor = this.EditorRef?.nativeElement;
+        if (!editor || this.Disabled) {
             return false;
         }
         if (!this.mentionTriggers.includes(triggerChar)) {
@@ -674,15 +898,15 @@ export class MentionEditorComponent {
         // 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;
+        return (this.ShowMentionDropdown || this.virtualTriggerOpen) && this.activeTrigger === triggerChar;
     }
     /** True when keyboard focus currently sits inside this editor. */
     get HasFocus() {
-        const editor = this.editorRef?.nativeElement;
+        const editor = this.EditorRef?.nativeElement;
         return !!editor && (editor === document.activeElement || editor.contains(document.activeElement));
     }
     InsertMention(suggestion, focus = true) {
-        const editor = this.editorRef?.nativeElement;
+        const editor = this.EditorRef?.nativeElement;
         if (!editor) {
             return false;
         }
@@ -708,7 +932,7 @@ export class MentionEditorComponent {
         if (!focus) {
             editor.blur();
         }
-        this.onInput();
+        this.OnInput();
         return true;
     }
     insertMentionChip(suggestion) {
@@ -741,7 +965,7 @@ export class MentionEditorComponent {
         selection.removeAllRanges();
         selection.addRange(range);
         // Trigger change detection
-        this.onInput();
+        this.OnInput();
     }
     /**
      * Create a mention chip DOM element
@@ -1082,33 +1306,37 @@ export class MentionEditorComponent {
             if (prevNode && prevNode.classList?.contains('mention-chip')) {
                 event.preventDefault();
                 prevNode.remove();
-                this.onInput();
+                this.OnInput();
             }
         }
     }
     /**
      * Close mention dropdown
      */
-    closeMentionDropdown() {
+    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;
+        this.MentionDropdownAlignRight = false;
         // Invalidate any in-flight suggestion fetch so a late response can't reopen the dropdown
         this.suggestionRequestSeq++;
-        this.showMentionDropdown = false;
-        this.mentionSuggestions = [];
+        this.ShowMentionDropdown = false;
+        this.MentionSuggestions = [];
         this.mentionStartIndex = -1;
         this.mentionQuery = '';
         this.activeTrigger = '@';
     }
+    /** @deprecated Use {@link CloseMentionDropdown}. */
+    closeMentionDropdown() {
+        return this.CloseMentionDropdown();
+    }
     /**
      * Convert editor HTML to plain text with @mentions
      */
     getPlainText() {
-        const editor = this.editorRef?.nativeElement;
+        const editor = this.EditorRef?.nativeElement;
         if (!editor)
             return '';
         let text = '';
@@ -1180,7 +1408,7 @@ export class MentionEditorComponent {
      * strings (no tokens) take the fast path.
      */
     setEditorContent(text) {
-        const editor = this.editorRef?.nativeElement;
+        const editor = this.EditorRef?.nativeElement;
         if (!editor)
             return;
         const segments = MentionEditorComponent.ParseSerializedMentions(text);
@@ -1290,7 +1518,7 @@ export class MentionEditorComponent {
     }
     // ControlValueAccessor implementation
     writeValue(value) {
-        const editor = this.editorRef?.nativeElement;
+        const editor = this.EditorRef?.nativeElement;
         if (!editor) {
             // View not created yet — buffer the value; ngAfterViewInit applies it
             this.pendingWriteValue = value ?? '';
@@ -1307,36 +1535,44 @@ export class MentionEditorComponent {
         this.onChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        this.OnTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        if (this.editorRef?.nativeElement) {
-            this.editorRef.nativeElement.contentEditable = (!isDisabled).toString();
+        this.Disabled = isDisabled;
+        if (this.EditorRef?.nativeElement) {
+            this.EditorRef.nativeElement.contentEditable = (!isDisabled).toString();
         }
     }
     /**
      * Focus the editor
      */
+    Focus() {
+        this.EditorRef?.nativeElement?.focus();
+    }
+    /** @deprecated Use {@link Focus}. */
     focus() {
-        this.editorRef?.nativeElement?.focus();
+        return this.Focus();
     }
     /**
      * Clear the editor content and pending attachments
      */
-    clear() {
-        if (this.editorRef?.nativeElement) {
-            this.editorRef.nativeElement.textContent = '';
-            this.onInput();
+    Clear() {
+        if (this.EditorRef?.nativeElement) {
+            this.EditorRef.nativeElement.textContent = '';
+            this.OnInput();
         }
-        this.clearPendingAttachments();
+        this.ClearPendingAttachments();
+    }
+    /** @deprecated Use {@link Clear}. */
+    clear() {
+        return this.Clear();
     }
     /**
      * Extract mention chips with their configuration data
      * Returns array of objects containing mention info and preset configuration
      */
-    getMentionChipsData() {
-        const editor = this.editorRef?.nativeElement;
+    GetMentionChipsData() {
+        const editor = this.EditorRef?.nativeElement;
         if (!editor)
             return [];
         const chips = [];
@@ -1358,13 +1594,17 @@ export class MentionEditorComponent {
         });
         return chips;
     }
+    /** @deprecated Use {@link GetMentionChipsData}. */
+    getMentionChipsData() {
+        return this.GetMentionChipsData();
+    }
     /**
      * Get the plain text value with mentions encoded as JSON
      * This format preserves configuration information when messages are saved
      * Format: @{type:"agent",id:"uuid",name:"Agent Name",configId:"uuid",config:"High"}
      */
-    getPlainTextWithJsonMentions() {
-        const editor = this.editorRef?.nativeElement;
+    GetPlainTextWithJsonMentions() {
+        const editor = this.EditorRef?.nativeElement;
         if (!editor)
             return '';
         let plainText = '';
@@ -1413,34 +1653,46 @@ export class MentionEditorComponent {
         }
         return plainText;
     }
+    /** @deprecated Use {@link GetPlainTextWithJsonMentions}. */
+    getPlainTextWithJsonMentions() {
+        return this.GetPlainTextWithJsonMentions();
+    }
     // ==================== Attachment Handling Methods ====================
     /**
      * Handle drag over event
      */
-    onDragOver(event) {
-        if (!this.enableAttachments)
+    OnDragOver(event) {
+        if (this.Disabled || !this.EnableAttachments)
             return;
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver = true;
+        this.IsDragOver = true;
+    }
+    /** @deprecated Use {@link OnDragOver}. */
+    onDragOver(event) {
+        return this.OnDragOver(event);
     }
     /**
      * Handle drag leave event
      */
-    onDragLeave(event) {
+    OnDragLeave(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver = false;
+        this.IsDragOver = false;
+    }
+    /** @deprecated Use {@link OnDragLeave}. */
+    onDragLeave(event) {
+        return this.OnDragLeave(event);
     }
     /**
      * Handle drop event
      */
-    onDrop(event) {
-        if (!this.enableAttachments)
+    OnDrop(event) {
+        if (this.Disabled || !this.EnableAttachments)
             return;
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver = false;
+        this.IsDragOver = false;
         if (event.dataTransfer?.files) {
             const files = Array.from(event.dataTransfer.files);
             for (const file of files) {
@@ -1450,10 +1702,14 @@ export class MentionEditorComponent {
             }
         }
     }
+    /** @deprecated Use {@link OnDrop}. */
+    onDrop(event) {
+        return this.OnDrop(event);
+    }
     /**
      * Handle file input change (from file picker)
      */
-    onFileSelected(event) {
+    OnFileSelected(event) {
         const input = event.target;
         if (input.files) {
             const files = Array.from(input.files);
@@ -1464,6 +1720,10 @@ export class MentionEditorComponent {
             input.value = '';
         }
     }
+    /** @deprecated Use {@link OnFileSelected}. */
+    onFileSelected(event) {
+        return this.OnFileSelected(event);
+    }
     /**
      * Process a file for attachment
      */
@@ -1471,13 +1731,13 @@ export class MentionEditorComponent {
         // Validate file
         const validation = this.validateFile(file);
         if (!validation.valid) {
-            this.attachmentError.emit(validation.error);
+            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');
+            this.AttachmentError.emit('Failed to read file');
             return;
         }
         // Get image dimensions if applicable
@@ -1501,8 +1761,8 @@ export class MentionEditorComponent {
             thumbnailUrl: file.type.startsWith('image/') ? dataUrl : undefined
         };
         // Add to pending attachments
-        this.pendingAttachments.push(attachment);
-        this.attachmentsChanged.emit([...this.pendingAttachments]);
+        this.PendingAttachments.push(attachment);
+        this.AttachmentsChanged.emit([...this.PendingAttachments]);
         this.cdr.detectChanges();
     }
     /**
@@ -1510,15 +1770,15 @@ export class MentionEditorComponent {
      */
     validateFile(file) {
         // Check count limit
-        if (this.pendingAttachments.length >= this.maxAttachments) {
+        if (this.PendingAttachments.length >= this.MaxAttachments) {
             return {
                 valid: false,
-                error: `Maximum ${this.maxAttachments} attachments allowed`
+                error: `Maximum ${this.MaxAttachments} attachments allowed`
             };
         }
         // Check size limit
-        if (file.size > this.maxAttachmentSizeBytes) {
-            const maxMB = (this.maxAttachmentSizeBytes / (1024 * 1024)).toFixed(1);
+        if (file.size > this.MaxAttachmentSizeBytes) {
+            const maxMB = (this.MaxAttachmentSizeBytes / (1024 * 1024)).toFixed(1);
             const fileMB = (file.size / (1024 * 1024)).toFixed(1);
             return {
                 valid: false,
@@ -1538,10 +1798,10 @@ export class MentionEditorComponent {
      * Check if file type is accepted
      */
     isAcceptedFile(file) {
-        if (this.acceptedFileTypes === '*' || this.acceptedFileTypes === '*/*') {
+        if (this.AcceptedFileTypes === '*' || this.AcceptedFileTypes === '*/*') {
             return true;
         }
-        const acceptedTypes = this.acceptedFileTypes.split(',').map(t => t.trim());
+        const acceptedTypes = this.AcceptedFileTypes.split(',').map(t => t.trim());
         for (const accepted of acceptedTypes) {
             // Handle universal wildcard */* anywhere in the list
             if (accepted === '*/*') {
@@ -1602,19 +1862,27 @@ export class MentionEditorComponent {
     /**
      * Remove a pending attachment by ID
      */
-    removeAttachment(id) {
-        const index = this.pendingAttachments.findIndex(a => a.id === 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.PendingAttachments.splice(index, 1);
+            this.AttachmentsChanged.emit([...this.PendingAttachments]);
             this.cdr.detectChanges();
         }
     }
+    /** @deprecated Use {@link RemoveAttachment}. */
+    removeAttachment(id) {
+        return this.RemoveAttachment(id);
+    }
     /**
      * Get all pending attachments
      */
+    GetPendingAttachments() {
+        return [...this.PendingAttachments];
+    }
+    /** @deprecated Use {@link GetPendingAttachments}. */
     getPendingAttachments() {
-        return [...this.pendingAttachments];
+        return this.GetPendingAttachments();
     }
     /**
      * Add an artifact as a pending attachment programmatically.
@@ -1632,51 +1900,67 @@ export class MentionEditorComponent {
             source: 'artifact',
             artifactVersionId: artifact.artifactVersionId
         };
-        this.pendingAttachments.push(attachment);
-        this.attachmentsChanged.emit([...this.pendingAttachments]);
+        this.PendingAttachments.push(attachment);
+        this.AttachmentsChanged.emit([...this.PendingAttachments]);
         return attachment;
     }
     /**
      * Clear all pending attachments
      */
-    clearPendingAttachments() {
-        this.pendingAttachments = [];
-        this.attachmentsChanged.emit([]);
+    ClearPendingAttachments() {
+        this.PendingAttachments = [];
+        this.AttachmentsChanged.emit([]);
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link ClearPendingAttachments}. */
+    clearPendingAttachments() {
+        return this.ClearPendingAttachments();
+    }
     /**
      * Handle click on an attachment thumbnail
      */
+    OnAttachmentClick(attachment) {
+        this.AttachmentClicked.emit(attachment);
+    }
+    /** @deprecated Use {@link OnAttachmentClick}. */
     onAttachmentClick(attachment) {
-        this.attachmentClicked.emit(attachment);
+        return this.OnAttachmentClick(attachment);
     }
     /**
      * Check if there are any pending attachments
      */
+    HasAttachments() {
+        return this.PendingAttachments.length > 0;
+    }
+    /** @deprecated Use {@link HasAttachments}. */
     hasAttachments() {
-        return this.pendingAttachments.length > 0;
+        return this.HasAttachments();
     }
     /**
      * Trigger file picker programmatically
      */
-    openFilePicker() {
+    OpenFilePicker() {
         const input = document.createElement('input');
         input.type = 'file';
         // If */* is in the list, accept all files (some browsers don't handle */* correctly)
-        input.accept = this.acceptedFileTypes.includes('*/*') ? '' : this.acceptedFileTypes;
+        input.accept = this.AcceptedFileTypes.includes('*/*') ? '' : this.AcceptedFileTypes;
         input.multiple = true;
-        input.onchange = (e) => this.onFileSelected(e);
+        input.onchange = (e) => this.OnFileSelected(e);
         input.click();
     }
+    /** @deprecated Use {@link OpenFilePicker}. */
+    openFilePicker() {
+        return this.OpenFilePicker();
+    }
     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);
+            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([
+        } }, inputs: { Placeholder: "Placeholder", placeholder: "placeholder", Disabled: "Disabled", disabled: "disabled", CurrentUser: "CurrentUser", currentUser: "currentUser", EnableMentions: "EnableMentions", enableMentions: "enableMentions", TriggerProviders: "TriggerProviders", ExcludedTriggerKeys: "ExcludedTriggerKeys", Provider: "Provider", AutoFocus: "AutoFocus", autoFocus: "autoFocus", EnableAttachments: "EnableAttachments", enableAttachments: "enableAttachments", MaxAttachments: "MaxAttachments", maxAttachments: "maxAttachments", MaxAttachmentSizeBytes: "MaxAttachmentSizeBytes", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", AcceptedFileTypes: "AcceptedFileTypes", acceptedFileTypes: "acceptedFileTypes" }, outputs: { ValueChange: "ValueChange", valueChange: "valueChange", MentionSelected: "MentionSelected", mentionSelected: "mentionSelected", EnterPressed: "EnterPressed", enterPressed: "enterPressed", AttachmentsChanged: "AttachmentsChanged", attachmentsChanged: "attachmentsChanged", AttachmentError: "AttachmentError", attachmentError: "attachmentError", AttachmentClicked: "AttachmentClicked", attachmentClicked: "attachmentClicked", EditorBlurred: "EditorBlurred", editorBlurred: "editorBlurred" }, standalone: false, features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => MentionEditorComponent),
@@ -1713,15 +1997,23 @@ export class 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      [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: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { EditorRef: [{
             type: ViewChild,
             args: ['editor', { static: false }]
+        }], Placeholder: [{
+            type: Input
         }], placeholder: [{
             type: Input
+        }], Disabled: [{
+            type: Input
         }], disabled: [{
             type: Input
+        }], CurrentUser: [{
+            type: Input
         }], currentUser: [{
             type: Input
+        }], EnableMentions: [{
+            type: Input
         }], enableMentions: [{
             type: Input
         }], TriggerProviders: [{
@@ -1730,28 +2022,52 @@ export class MentionEditorComponent {
             type: Input
         }], Provider: [{
             type: Input
+        }], AutoFocus: [{
+            type: Input
         }], autoFocus: [{
             type: Input
+        }], EnableAttachments: [{
+            type: Input
         }], enableAttachments: [{
             type: Input
+        }], MaxAttachments: [{
+            type: Input
         }], maxAttachments: [{
             type: Input
+        }], MaxAttachmentSizeBytes: [{
+            type: Input
         }], maxAttachmentSizeBytes: [{
             type: Input
+        }], AcceptedFileTypes: [{
+            type: Input
         }], acceptedFileTypes: [{
             type: Input
+        }], ValueChange: [{
+            type: Output
         }], valueChange: [{
             type: Output
+        }], MentionSelected: [{
+            type: Output
         }], mentionSelected: [{
             type: Output
+        }], EnterPressed: [{
+            type: Output
         }], enterPressed: [{
             type: Output
+        }], AttachmentsChanged: [{
+            type: Output
         }], attachmentsChanged: [{
             type: Output
+        }], AttachmentError: [{
+            type: Output
         }], attachmentError: [{
             type: Output
+        }], AttachmentClicked: [{
+            type: Output
         }], attachmentClicked: [{
             type: Output
+        }], EditorBlurred: [{
+            type: Output
         }], editorBlurred: [{
             type: Output
         }], onDocumentMouseDown: [{