{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "mentions", "title": "Mentions", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/mentions/mentions.component.ts", "content": "import {\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n SimpleChanges,\n ViewChild,\n booleanAttribute,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport {\n UiPopoverAnchorComponent,\n UiPopoverComponent,\n UiPopoverContentComponent,\n type PopoverDismissEvent,\n} from '@/ui/popover/popover.component'\nimport { uniqueId } from '@/ui/popper/popper'\nimport { getCaretRect, type CaretRect } from './caret-position'\n\nexport { UiMentionTagComponent } from './mention-tag.component'\n\nexport interface MentionOption {\n value: string\n label: string\n description?: string\n avatar?: string\n email?: string\n handle?: string\n bio?: string\n joined?: string\n following?: number | string\n followers?: number | string\n verified?: boolean\n disabled?: boolean\n [key: string]: unknown\n}\n\n/**\n * Angular port of UIPKGE Mentions, 1:1 with the React component: a combobox textarea that\n * detects a trigger character (`@` by default, or any of `triggers`) at the caret, opens a\n * Popover anchored at the caret with the filtered options (static list, per-trigger map, or\n * debounced `loadOptions`), and on Enter / Tab / click replaces trigger + query with the\n * formatted token. ArrowUp / ArrowDown move the highlight (skipping disabled options) and\n * Escape closes. Focus stays in the textarea (the popover never steals it).\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-mentions, [ui-mentions]',\n standalone: true,\n imports: [UiPopoverComponent, UiPopoverAnchorComponent, UiPopoverContentComponent],\n host: {\n 'data-uipkge': '',\n 'data-slot': 'mentions',\n '[class]': 'hostClass',\n },\n template: `\n 0 ? optionId(highlightedIndex()) : null\"\n class=\"border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-16 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeyDown($event)\"\n (scroll)=\"updateAnchor()\"\n >\n \n \n \n
\n @if (totalLoading) {\n
Loading...
\n } @else if (filtered.length === 0) {\n
No matches
\n } @else {\n
    \n @for (opt of filtered; track opt.value; let i = $index) {\n \n @if (opt.avatar) {\n \"\"\n }\n
    \n
    {{ opt.label }}
    \n @if (opt.description || opt.email) {\n
    {{ opt.description || opt.email }}
    \n }\n
    \n \n }\n
\n }\n
\n \n \n `,\n})\nexport class UiMentionsComponent implements OnChanges, OnDestroy {\n /** Controlled textarea value (pair with `valueChange`). */\n @Input() value = ''\n @Input() options: O[] | Record = []\n @Input() triggers: string[] = ['@']\n @Input() triggerPrefixes?: Record\n @Input() prefix = '@'\n @Input() rows = 4\n @Input({ transform: booleanAttribute }) loading = false\n @Input() loadOptions?: (query: string, trigger: string) => Promise\n @Input() format?: (option: O, trigger: string) => string\n @Input() placeholder = ''\n @Input({ transform: booleanAttribute }) disabled = false\n @Input({ transform: booleanAttribute }) readOnly = false\n @Input('class') className?: string\n\n /** Fires with the next textarea value on every input + on insert (React `onValueChange`). */\n @Output() valueChange = new EventEmitter()\n /**\n * Fires when an option is committed into the text (React `onSelect`). Not named `select`:\n * the textarea's native select event bubbles to this host and would reach `(select)` too.\n */\n @Output() mentionSelect = new EventEmitter()\n /** Fires whenever the active mention query changes (React `onSearch`). */\n @Output() search = new EventEmitter<{ trigger: string; query: string }>()\n\n @ViewChild('textarea', { static: true }) private textareaRef!: ElementRef\n\n readonly open = signal(false)\n readonly activeTrigger = signal('')\n readonly query = signal('')\n readonly highlightedIndex = signal(0)\n readonly asyncResults = signal([])\n readonly isAsyncLoading = signal(false)\n readonly caretRect = signal(null)\n /** Latest text: the `value` input, advanced by typing / inserts until the parent echoes it. */\n readonly current = signal('')\n private triggerIndex = -1\n private asyncToken = 0\n private debounceTimer: ReturnType | null = null\n readonly listboxId = uniqueId('mentions-listbox')\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['value']) this.current.set(this.value ?? '')\n }\n\n ngOnDestroy(): void {\n if (this.debounceTimer) clearTimeout(this.debounceTimer)\n }\n\n get hostClass(): string {\n return cn('block', 'relative w-full', this.className)\n }\n\n optionId(i: number): string {\n return `${this.listboxId}-opt-${i}`\n }\n\n private get currentOptionsList(): O[] {\n const options = this.options\n if (!options) return []\n if (Array.isArray(options)) return options\n return options[this.activeTrigger()] ?? []\n }\n\n get filtered(): O[] {\n if (this.loadOptions) return this.asyncResults()\n const source = this.currentOptionsList\n const query = this.query()\n if (!query) return source\n const q = query.toLowerCase()\n return source.filter(\n (o) =>\n o.label.toLowerCase().includes(q) ||\n o.value.toLowerCase().includes(q) ||\n (o.email && o.email.toLowerCase().includes(q)),\n )\n }\n\n get totalLoading(): boolean {\n return this.loading || this.isAsyncLoading()\n }\n\n optionClass(opt: O, i: number): string {\n return cn(\n 'flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',\n i === this.highlightedIndex() && !opt.disabled ? 'bg-accent text-accent-foreground' : '',\n opt.disabled ? 'cursor-not-allowed opacity-50' : '',\n )\n }\n\n /** React: `onOpenAutoFocus={(e) => e.preventDefault()}` keeps the caret in the textarea. */\n preventFocus(e: PopoverDismissEvent): void {\n e.preventDefault()\n }\n\n private moveHighlight(delta: number): void {\n const list = this.filtered\n const len = list.length\n if (len === 0) return\n let i = this.highlightedIndex()\n for (let n = 0; n < len; n++) {\n i = (i + delta + len) % len\n if (!list[i]?.disabled) {\n document.getElementById(this.optionId(i))?.scrollIntoView?.({ block: 'nearest' })\n this.highlightedIndex.set(i)\n return\n }\n }\n }\n\n private findActiveMention(val: string, caret: number): { trigger: string; index: number; query: string } | null {\n for (let i = caret - 1; i >= 0; i--) {\n const ch = val[i]!\n if (this.triggers.includes(ch)) {\n const before = i === 0 ? '' : val[i - 1]!\n if (i === 0 || /\\s/.test(before)) return { trigger: ch, index: i, query: val.substring(i + 1, caret) }\n return null\n }\n if (/\\s/.test(ch)) return null\n }\n return null\n }\n\n updateAnchor(): void {\n const ta = this.textareaRef.nativeElement\n this.caretRect.set(getCaretRect(ta, ta.selectionStart ?? 0))\n }\n\n private async runAsync(trigger: string, q: string): Promise {\n if (!this.loadOptions) return\n const token = ++this.asyncToken\n this.isAsyncLoading.set(true)\n try {\n const results = await this.loadOptions(q, trigger)\n if (token === this.asyncToken) this.asyncResults.set(results)\n } finally {\n if (token === this.asyncToken) this.isAsyncLoading.set(false)\n }\n }\n\n private scheduleAsync(trigger: string, q: string): void {\n if (this.debounceTimer) clearTimeout(this.debounceTimer)\n this.debounceTimer = setTimeout(() => void this.runAsync(trigger, q), 200)\n }\n\n onInput(e: Event): void {\n const ta = e.target as HTMLTextAreaElement\n const next = ta.value\n this.current.set(next)\n this.valueChange.emit(next)\n const match = this.findActiveMention(next, ta.selectionStart ?? 0)\n if (match) {\n // Anchor at the caret before opening so the first placement is already right.\n this.updateAnchor()\n this.activeTrigger.set(match.trigger)\n this.triggerIndex = match.index\n this.query.set(match.query)\n this.open.set(true)\n this.search.emit({ trigger: match.trigger, query: match.query })\n if (this.loadOptions) this.scheduleAsync(match.trigger, match.query)\n requestAnimationFrame(() => this.updateAnchor())\n } else {\n this.open.set(false)\n }\n }\n\n private defaultFormat(option: O, trigger: string): string {\n const resolvedPrefix = this.triggerPrefixes?.[trigger] ?? trigger ?? this.prefix ?? '@'\n return `${resolvedPrefix}${option.value} `\n }\n\n insert(option: O): void {\n const ta = this.textareaRef.nativeElement\n const caret = ta.selectionStart ?? 0\n const value = this.current()\n const before = value.substring(0, this.triggerIndex)\n const after = value.substring(caret)\n const trigger = this.activeTrigger()\n const token = this.format ? this.format(option, trigger) : this.defaultFormat(option, trigger)\n const next = before + token + after\n this.current.set(next)\n this.valueChange.emit(next)\n this.mentionSelect.emit(option)\n this.open.set(false)\n requestAnimationFrame(() => {\n const pos = before.length + token.length\n ta.focus()\n ta.setSelectionRange(pos, pos)\n })\n }\n\n onKeyDown(e: KeyboardEvent): void {\n if (!this.open()) return\n if (e.key === 'Escape') {\n e.preventDefault()\n this.open.set(false)\n return\n }\n const list = this.filtered\n if (list.length === 0) return\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n this.moveHighlight(1)\n } else if (e.key === 'ArrowUp') {\n e.preventDefault()\n this.moveHighlight(-1)\n } else if (e.key === 'Enter' || e.key === 'Tab') {\n e.preventDefault()\n const opt = list[this.highlightedIndex()]\n if (opt && !opt.disabled) this.insert(opt)\n }\n }\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/mentions/mentions.component.ts" }, { "path": "packages/registry-angular/components/mentions/mention-tag.component.ts", "content": "import {\n AfterViewChecked,\n Component,\n ElementRef,\n Input,\n TemplateRef,\n booleanAttribute,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport {\n UiHoverCardComponent,\n UiHoverCardContentComponent,\n UiHoverCardTriggerComponent,\n} from '@/ui/hover-card/hover-card.component'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiRenderTemplateDirective } from '@/ui/popper/popper'\n\n/**\n * Angular port of UIPKGE MentionTag, 1:1 with the React component: an inline chip (an\n * `` when `href` is set, else a ``) showing `trigger` + name, which reveals a\n * Twitter/X-style profile HoverCard (avatar, Follow toggle, name + verified badge, handle,\n * email, bio, joined date, following / followers) after `openDelay`. `popover=false`\n * renders the bare chip; `popupContent` replaces the card body. Projected content replaces\n * the default chip text (React `children`).\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-mention-tag, [ui-mention-tag]',\n standalone: true,\n imports: [\n UiHoverCardComponent,\n UiHoverCardTriggerComponent,\n UiHoverCardContentComponent,\n UiAvatarComponent,\n UiAvatarImageComponent,\n UiAvatarFallbackComponent,\n UiRenderTemplateDirective,\n ],\n // React renders the chip itself (no wrapper element).\n host: { '[class]': '\"contents\"' },\n template: `\n \n \n {{ trigger }}\n {{ name || handle || email }}\n \n \n\n @if (popover) {\n \n @if (href) {\n \n } @else {\n \n }\n \n @if (popupContent) {\n \n } @else {\n
\n
\n \n @if (avatar) {\n \n }\n {{ initials }}\n \n \n {{ isFollowing() ? 'Following' : 'Follow' }}\n \n
\n\n
\n
\n {{ name || handle }}\n @if (verified) {\n \n \n \n \n \n }\n
\n

{{ formattedHandle }}

\n @if (email) {\n

{{ email }}

\n }\n
\n\n @if (bio) {\n

{{ bio }}

\n }\n\n @if (joined || location) {\n
\n @if (joined) {\n
\n \n \n \n \n \n \n Joined {{ joined }}\n
\n }\n
\n }\n\n @if (following !== undefined || followers !== undefined) {\n
\n @if (following !== undefined) {\n
\n {{ following }}\n Following\n
\n }\n @if (followers !== undefined) {\n
\n {{ followers }}\n Followers\n
\n }\n
\n }\n
\n }\n \n \n } @else if (href) {\n \n } @else {\n \n }\n `,\n})\nexport class UiMentionTagComponent implements AfterViewChecked {\n private readonly el = inject>(ElementRef).nativeElement\n @Input() trigger = '@'\n @Input() name?: string\n @Input() handle?: string\n @Input() email?: string\n @Input() avatar?: string\n @Input() bio?: string\n @Input() joined?: string\n @Input() location?: string\n @Input() following?: number | string\n @Input() followers?: number | string\n @Input({ transform: booleanAttribute }) verified = false\n @Input() href?: string\n @Input({ transform: booleanAttribute }) popover = true\n @Input() openDelay = 150\n @Input() closeDelay = 100\n /** Replaces the default profile card body (React `popupContent` node). */\n @Input() popupContent?: TemplateRef | null\n @Input('class') className?: string\n\n readonly isFollowing = signal(false)\n\n ngAfterViewChecked(): void {\n // Radix Slot: the chip's data-slot wins over HoverCardTrigger's (Angular host bindings would win).\n const chip = this.el.querySelector(':scope > ui-hover-card > [data-slot=\"hover-card-trigger\"]')\n chip?.setAttribute('data-slot', 'mention-tag')\n }\n\n get formattedHandle(): string {\n if (!this.handle && !this.name) return ''\n const h = this.handle || this.name || ''\n return h.startsWith(this.trigger) ? h : `${this.trigger}${h}`\n }\n\n get initials(): string {\n return (this.name || this.handle || 'U').slice(0, 2).toUpperCase()\n }\n\n get chipClass(): string {\n return cn(\n 'inline-flex cursor-pointer items-center gap-0.5 rounded px-1.5 py-0.5 text-sm font-medium transition-colors select-none',\n 'bg-muted/70 text-foreground hover:bg-accent hover:text-accent-foreground',\n 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n this.className,\n )\n }\n\n get followClass(): string {\n return cn(\n 'h-8 rounded-full px-3.5 text-xs font-semibold transition-[transform,background-color] duration-150 active:scale-95',\n this.isFollowing()\n ? 'border-border text-foreground hover:bg-muted border bg-transparent'\n : 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',\n )\n }\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/mentions/mention-tag.component.ts" }, { "path": "packages/registry-angular/components/mentions/caret-position.ts", "content": "const PROPERTIES_TO_COPY = [\n 'direction',\n 'boxSizing',\n 'width',\n 'height',\n 'overflowX',\n 'overflowY',\n 'borderTopWidth',\n 'borderRightWidth',\n 'borderBottomWidth',\n 'borderLeftWidth',\n 'borderStyle',\n 'paddingTop',\n 'paddingRight',\n 'paddingBottom',\n 'paddingLeft',\n 'fontStyle',\n 'fontVariant',\n 'fontWeight',\n 'fontStretch',\n 'fontSize',\n 'fontSizeAdjust',\n 'lineHeight',\n 'fontFamily',\n 'textAlign',\n 'textTransform',\n 'textIndent',\n 'textDecoration',\n 'letterSpacing',\n 'wordSpacing',\n 'tabSize',\n 'whiteSpace',\n 'wordBreak',\n 'wordWrap',\n] as const\n\nexport interface CaretRect {\n top: number\n left: number\n height: number\n}\n\nexport function getCaretRect(textarea: HTMLTextAreaElement, position: number): CaretRect {\n const div = document.createElement('div')\n document.body.appendChild(div)\n\n const style = div.style\n const computed = window.getComputedStyle(textarea)\n\n style.position = 'absolute'\n style.visibility = 'hidden'\n style.whiteSpace = 'pre-wrap'\n style.wordWrap = 'break-word'\n style.top = '0'\n style.left = '0'\n\n for (const prop of PROPERTIES_TO_COPY) {\n ;(style as any)[prop] = (computed as any)[prop]\n }\n\n style.overflow = 'hidden'\n\n const text = textarea.value.substring(0, position)\n div.textContent = text\n\n const span = document.createElement('span')\n span.textContent = textarea.value.substring(position) || '.'\n div.appendChild(span)\n\n const spanRect = span.getBoundingClientRect()\n const divRect = div.getBoundingClientRect()\n const taRect = textarea.getBoundingClientRect()\n\n const result: CaretRect = {\n top: taRect.top + (spanRect.top - divRect.top) - textarea.scrollTop,\n left: taRect.left + (spanRect.left - divRect.left) - textarea.scrollLeft,\n height: spanRect.height,\n }\n\n document.body.removeChild(div)\n return result\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/mentions/caret-position.ts" }, { "path": "packages/registry-angular/components/mentions/index.ts", "content": "export { UiMentionsComponent, type MentionOption } from './mentions.component'\nexport { UiMentionTagComponent } from './mention-tag.component'\nexport * from './caret-position'\n", "type": "registry:ui", "target": "~/src/app/components/ui/mentions/index.ts" } ], "dependencies": [], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/popover.json", "https://uipkge.dev/r/angular/hover-card.json", "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/popper.json" ], "description": "Textarea with trigger-character autocomplete and companion MentionTag with Twitter/X-style hover profile card popup.", "categories": [ "form" ] }