@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-comments.mjs

@@ -0,0 +1,864 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Injector, model, input, booleanAttribute, output, computed, signal, DestroyRef, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+import { injectCbTranslation, cbFormat, cbRelativeTime } from '@caribeng/ui';
+import { CbAvatar } from '@caribeng/ui/avatar';
+import { cbSanitizeHtml, cbHtmlToText, CbEditor } from '@caribeng/ui/editor';
+import { CbIconRegistry, CbIcon } from '@caribeng/ui/icon';
+import { messageSquare, reply } from '@caribeng/ui/icons';
+
+function toTime(date) {
+    if (!date)
+        return 0;
+    const t = (date instanceof Date ? date : new Date(date)).getTime();
+    return Number.isNaN(t) ? 0 : t;
+}
+/**
+ * Hilo ordenado por fecha: comentarios raíz (con sus respuestas, siempre de la más antigua a la
+ * más reciente) y actividad. Una respuesta cuyo padre no existe se muestra como comentario raíz.
+ */
+function buildFeed(comments, activity, filter, order) {
+    const ids = new Set(comments.map((c) => c.id));
+    const replies = new Map();
+    for (const c of comments) {
+        if (c.parentId && ids.has(c.parentId)) {
+            const list = replies.get(c.parentId) ?? [];
+            list.push(c);
+            replies.set(c.parentId, list);
+        }
+    }
+    const items = [];
+    if (filter !== 'activity') {
+        for (const c of comments) {
+            if (c.parentId && ids.has(c.parentId))
+                continue;
+            const own = (replies.get(c.id) ?? []).sort((a, b) => toTime(a.date) - toTime(b.date));
+            // Un comentario eliminado sin respuestas no aporta nada.
+            if (c.deleted && !own.length)
+                continue;
+            items.push({ kind: 'comment', comment: c, replies: own, time: toTime(c.date) });
+        }
+    }
+    if (filter !== 'comments') {
+        for (const a of activity)
+            items.push({ kind: 'activity', activity: a, time: toTime(a.date) });
+    }
+    items.sort((a, b) => (order === 'oldest' ? a.time - b.time : b.time - a.time));
+    return items;
+}
+/** Ids de las personas mencionadas en un HTML (`data-mention`), sin repetir y en orden. */
+function mentionIds(html) {
+    const found = [];
+    for (const m of html.matchAll(/data-mention="([^"]+)"/g)) {
+        if (!found.includes(m[1]))
+            found.push(m[1]);
+    }
+    return found;
+}
+/** Pone o quita la reacción `emoji` de `userId`; las reacciones que se quedan sin nadie desaparecen. */
+function toggleReaction(reactions, emoji, userId) {
+    const list = [...(reactions ?? [])];
+    const i = list.findIndex((r) => r.emoji === emoji);
+    if (i < 0)
+        return { reactions: [...list, { emoji, by: [userId] }], added: true };
+    const had = list[i].by.includes(userId);
+    const by = had ? list[i].by.filter((id) => id !== userId) : [...list[i].by, userId];
+    if (by.length)
+        list[i] = { emoji, by };
+    else
+        list.splice(i, 1);
+    return { reactions: list, added: !had };
+}
+/**
+ * Elimina un comentario. Si tiene respuestas se conserva como "eliminado" para no romper el hilo;
+ * si era la última respuesta de un comentario ya eliminado, también desaparece el padre.
+ */
+function removeComment(comments, id) {
+    const target = comments.find((c) => c.id === id);
+    if (!target)
+        return [...comments];
+    const hasReplies = comments.some((c) => c.parentId === id);
+    let next = hasReplies
+        ? comments.map((c) => (c.id === id ? { ...c, html: '', deleted: true, reactions: [] } : c))
+        : comments.filter((c) => c.id !== id);
+    const parent = target.parentId ? next.find((c) => c.id === target.parentId) : undefined;
+    if (parent?.deleted && !next.some((c) => c.parentId === parent.id))
+        next = next.filter((c) => c.id !== parent.id);
+    return next;
+}
+/** Id nuevo (UUID si el entorno lo permite). */
+function newCommentId() {
+    const c = globalThis.crypto;
+    return c?.randomUUID ? c.randomUUID() : `cb-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+/** Iniciales de un nombre ("Ana López" → "AL"). */
+function initialsOf(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    return ((parts[0]?.[0] ?? '') + (parts.length > 1 ? parts[parts.length - 1][0] : '')).toUpperCase();
+}
+
+/** Lucide `smile-plus` (no está en el catálogo). */
+const SMILE_PLUS = '<path d="M22 11v1a10 10 0 1 1-9-10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" x2="9.01" y1="9" y2="9" /><line x1="15" x2="15.01" y1="9" y2="9" /><path d="M16 5h6" /><path d="M19 2v6" />';
+/** Barra del editor por defecto: lo justo para un comentario. */
+const CB_COMMENTS_TOOLBAR = ['bold', 'italic', 'strike', '|', 'bulletList', 'orderedList', '|', 'link', 'code'];
+let nextUid = 0;
+/**
+ * Hilo de comentarios y actividad de CaribeNG: comentarios con formato y @menciones
+ * (sobre `cb-editor`), respuestas de un nivel, reacciones con emoji, edición y borrado de los
+ * propios y, mezclado por fecha, el historial de cambios (`activity`).
+ *
+ * @example
+ * ```html
+ * <cb-comments [(comments)]="comentarios" [activity]="historial" [currentUser]="yo" [people]="equipo" />
+ * ```
+ */
+class CbComments {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
+        this.sanitizer = inject(DomSanitizer);
+        this.uid = `cb-comments-${++nextUid}`;
+        /** Comentarios (raíces y respuestas, en una lista plana). Se actualiza al publicar, editar, borrar o reaccionar. */
+        this.comments = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "comments" }] : /* istanbul ignore next */ []));
+        /** Historial de cambios, que se intercala por fecha con los comentarios. */
+        this.activity = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activity" }] : /* istanbul ignore next */ []));
+        /** Quién escribe. Sin él, el hilo es de solo lectura. */
+        this.currentUser = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentUser" }] : /* istanbul ignore next */ []));
+        /** Personas que se pueden mencionar con `@` y cuyos nombres aparecen en las reacciones. */
+        this.people = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
+        /** Fuente propia de menciones (lista o función, también asíncrona); sustituye a `people` para `@`. */
+        this.mentions = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mentions" }] : /* istanbul ignore next */ []));
+        /** Qué se muestra: todo, solo comentarios o solo actividad. */
+        this.filter = model('all', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        /** Orden del hilo. Con `oldest` la caja para comentar va al final; con `newest`, arriba. */
+        this.order = input('oldest', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []));
+        /** Emojis para reaccionar (vacío para quitar las reacciones). */
+        this.reactions = input(['👍', '❤️', '🎉', '😄', '👀', '🙏'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reactions" }] : /* istanbul ignore next */ []));
+        /** Permite responder a un comentario. */
+        this.replies = input(true, { ...(ngDevMode ? { debugName: "replies" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Permite editar y eliminar los comentarios propios. */
+        this.editable = input(true, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Muestra la caja para comentar (con `false` solo se responde, edita y reacciona). */
+        this.composer = input(true, { ...(ngDevMode ? { debugName: "composer" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Herramientas del editor. */
+        this.toolbar = input(CB_COMMENTS_TOOLBAR, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+        /** Alto del área de escritura (crece hasta 16rem). */
+        this.editorHeight = input('4.5rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorHeight" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.emptyMessage = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Nombre del hilo para lectores de pantalla (por defecto, "Comentarios y actividad"). */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Comentario publicado (raíz o respuesta). */
+        this.commentAdd = output();
+        this.commentEdit = output();
+        this.commentDelete = output();
+        this.reactionToggle = output();
+        this.filters = ['all', 'comments', 'activity'];
+        this.feed = computed(() => buildFeed(this.comments(), this.activity(), this.filter(), this.order()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "feed" }] : /* istanbul ignore next */ []));
+        this.showFilter = computed(() => this.activity().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showFilter" }] : /* istanbul ignore next */ []));
+        this.canAct = computed(() => !!this.currentUser() && !this.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canAct" }] : /* istanbul ignore next */ []));
+        this.mentionSource = computed(() => {
+            const own = this.mentions();
+            if (own)
+                return own;
+            const me = this.currentUser()?.id;
+            const list = this.people()
+                .filter((p) => p.id !== me)
+                .map((p) => ({ id: p.id, label: p.name, description: p.description }));
+            return list.length ? list : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mentionSource" }] : /* istanbul ignore next */ []));
+        this.names = computed(() => new Map(this.people().map((p) => [p.id, p.name])), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "names" }] : /* istanbul ignore next */ []));
+        /** Borradores abiertos, por clave (`new`, `reply:<id>`, `edit:<id>`). */
+        this.drafts = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "drafts" }] : /* istanbul ignore next */ []));
+        /** Hilo al que se está respondiendo y comentario en edición. */
+        this.replyTo = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "replyTo" }] : /* istanbul ignore next */ []));
+        this.editing = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+        this.picker = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
+        this.confirming = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "confirming" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        /** Hora de referencia de las fechas relativas (se refresca cada minuto). */
+        this.now = signal(Date.now(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+        this.safeCache = new Map();
+        this.announceFlip = false;
+        const registry = inject(CbIconRegistry);
+        for (const [name, body] of Object.entries({ 'cb-smile-plus': SMILE_PLUS, reply, 'message-square': messageSquare })) {
+            if (!registry.has(name))
+                registry.register({ [name]: body });
+        }
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const timer = setInterval(() => this.now.set(Date.now()), 60_000);
+            destroyRef.onDestroy(() => clearInterval(timer));
+        });
+    }
+    // --- Plantilla ---
+    itemKey(item) {
+        return item.kind === 'comment' ? `c:${item.comment.id}` : `a:${item.activity.id}`;
+    }
+    domId(id) {
+        return `${this.uid}-${id.replace(/[^\w-]/g, '_')}`;
+    }
+    filterLabel(f) {
+        const t = this.t();
+        return f === 'all' ? t.commentsAll : f === 'comments' ? t.commentsOnly : t.commentsActivity;
+    }
+    initials(name) {
+        return initialsOf(name);
+    }
+    iso(date) {
+        const time = toTime(date);
+        return time ? new Date(time).toISOString() : '';
+    }
+    full(date) {
+        const time = toTime(date);
+        return time ? new Intl.DateTimeFormat(this.t().intlLocale, { dateStyle: 'full', timeStyle: 'short' }).format(time) : '';
+    }
+    rel(date) {
+        const time = toTime(date);
+        return time ? cbRelativeTime(time, this.now(), this.t().intlLocale, this.t().commentsJustNow) : '';
+    }
+    /** HTML del comentario, saneado (lista blanca del editor) y marcado como seguro una sola vez. */
+    safe(html) {
+        const me = this.currentUser()?.id;
+        const key = `${me ?? ''}\u0000${html}`;
+        let value = this.safeCache.get(key);
+        if (!value) {
+            let clean = cbSanitizeHtml(html);
+            // Las menciones a quien lee se resaltan.
+            if (me)
+                clean = clean.split(`data-mention="${me}"`).join(`data-mention="${me}" data-self=""`);
+            value = this.sanitizer.bypassSecurityTrustHtml(clean);
+            if (this.safeCache.size > 500)
+                this.safeCache.clear();
+            this.safeCache.set(key, value);
+        }
+        return value;
+    }
+    mine(r) {
+        const me = this.currentUser()?.id;
+        return !!me && r.by.includes(me);
+    }
+    mineEmoji(c, emoji) {
+        const r = c.reactions?.find((x) => x.emoji === emoji);
+        return !!r && this.mine(r);
+    }
+    /** "👍, 2: Ana López y tú". */
+    reactionLabel(r) {
+        const me = this.currentUser()?.id;
+        const who = r.by.map((id) => (id === me ? this.t().commentsYou : (this.names().get(id) ?? id)));
+        const list = new Intl.ListFormat(this.t().intlLocale, { type: 'conjunction' }).format(who);
+        return cbFormat(this.t().commentsReactionLabel, r.emoji, r.by.length, list);
+    }
+    canManage(c) {
+        return this.editable() && c.author.id === this.currentUser()?.id;
+    }
+    isReplying(id) {
+        return this.replyTo() === id;
+    }
+    isEditing(id) {
+        return this.editing() === id;
+    }
+    isEdit(d) {
+        return typeof d === 'object' && 'edit' in d;
+    }
+    draftKey(d) {
+        return d === 'new' ? 'new' : 'reply' in d ? `reply:${d.reply}` : `edit:${d.edit}`;
+    }
+    draftOf(d) {
+        return this.drafts()[this.draftKey(d)] ?? '';
+    }
+    setDraft(d, html) {
+        const key = this.draftKey(d);
+        this.drafts.update((all) => ({ ...all, [key]: html }));
+    }
+    isEmpty(html) {
+        return !cbHtmlToText(html).trim();
+    }
+    placeholderOf(d) {
+        if (d === 'new')
+            return this.placeholder() ?? this.t().commentsWrite;
+        return 'reply' in d ? this.t().commentsWriteReply : '';
+    }
+    editorLabel(d) {
+        if (d === 'new')
+            return this.t().commentsNew;
+        if ('reply' in d)
+            return cbFormat(this.t().commentsReplyTo, this.find(d.reply)?.author.name ?? '');
+        return this.t().commentsEditing;
+    }
+    // --- Acciones ---
+    /** Ctrl / ⌘ + Enter envía; Escape cancela la respuesta o la edición (salvo que lo use el editor). */
+    onEditorKeydown(event, d) {
+        if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
+            this.submit(d);
+        }
+        else if (event.key === 'Escape' && d !== 'new' && !event.defaultPrevented) {
+            event.preventDefault();
+            this.cancelDraft(d);
+        }
+    }
+    submit(d) {
+        const html = cbSanitizeHtml(this.draftOf(d));
+        const me = this.currentUser();
+        if (!me || this.isEmpty(html))
+            return;
+        const now = new Date().toISOString();
+        if (this.isEdit(d)) {
+            const old = this.find(d.edit);
+            if (!old)
+                return;
+            const comment = { ...old, html, edited: now };
+            this.comments.update((list) => list.map((c) => (c.id === old.id ? comment : c)));
+            this.commentEdit.emit({ comment, mentions: mentionIds(html) });
+            this.editing.set(null);
+            this.announce(this.t().commentsSaved);
+            this.focusLater(`#${this.domId(old.id)}`);
+        }
+        else {
+            const parentId = d === 'new' ? undefined : d.reply;
+            const comment = { id: newCommentId(), author: me, html, date: now, ...(parentId ? { parentId } : {}) };
+            this.comments.update((list) => [...list, comment]);
+            this.commentAdd.emit({ comment, mentions: mentionIds(html) });
+            this.announce(this.t().commentsPosted);
+            if (parentId) {
+                this.replyTo.set(null);
+                this.focusLater(`#${this.domId(comment.id)}`);
+            }
+        }
+        this.clearDraft(d);
+    }
+    cancelDraft(d) {
+        this.clearDraft(d);
+        if (this.isEdit(d)) {
+            this.editing.set(null);
+            this.focusLater(`#${this.domId(d.edit)}-edit`);
+        }
+        else if (d !== 'new') {
+            this.replyTo.set(null);
+            this.focusLater(`#${this.domId(d.reply)}-reply`);
+        }
+    }
+    startReply(root) {
+        this.replyTo.set(root.id);
+        this.focusLater(`[data-draft="reply:${root.id}"] .cb-editor__surface`);
+    }
+    startEdit(c) {
+        this.setDraft({ edit: c.id }, c.html);
+        this.editing.set(c.id);
+        this.confirming.set(null);
+        this.focusLater(`[data-draft="edit:${c.id}"] .cb-editor__surface`);
+    }
+    askDelete(id) {
+        this.confirming.set(this.confirming() === id ? null : id);
+        if (this.confirming())
+            this.focusLater(`#${this.domId(id)}-confirm`);
+    }
+    cancelDelete(id) {
+        this.confirming.set(null);
+        this.focusLater(`#${this.domId(id)}-delete`);
+    }
+    confirmDelete(c) {
+        // Foco al comentario siguiente (o al anterior); si no queda ninguno, a la caja para comentar.
+        const articles = Array.from(this.host.nativeElement.querySelectorAll('.cb-comment'));
+        const i = articles.findIndex((a) => a.id === this.domId(c.id));
+        const next = articles[i + 1] ?? articles[i - 1];
+        this.confirming.set(null);
+        this.comments.update((list) => removeComment(list, c.id));
+        this.commentDelete.emit(c);
+        this.announce(this.t().commentsDeleted);
+        this.focusLater(next ? `#${next.id}` : '[data-draft="new"] .cb-editor__surface');
+    }
+    togglePicker(id) {
+        const open = this.picker() !== id;
+        this.picker.set(open ? id : null);
+        if (open)
+            this.focusLater(`#${this.domId(id)}-react + .cb-comment__picker .cb-comment__emoji`);
+    }
+    closePicker(id, event) {
+        event?.stopPropagation();
+        this.picker.set(null);
+        this.focusLater(`#${this.domId(id)}-react`);
+    }
+    /** El selector se cierra al salir de él con el teclado o el ratón. */
+    onPickerFocusOut(id, event) {
+        const wrap = event.currentTarget.parentElement;
+        const next = event.relatedTarget;
+        if (next && wrap?.contains(next))
+            return;
+        if (this.picker() === id)
+            this.picker.set(null);
+    }
+    react(c, emoji, fromPicker = false) {
+        const me = this.currentUser();
+        if (!me || this.readonly())
+            return;
+        const { reactions, added } = toggleReaction(c.reactions, emoji, me.id);
+        const comment = { ...c, reactions };
+        this.comments.update((list) => list.map((x) => (x.id === c.id ? comment : x)));
+        this.reactionToggle.emit({ comment, emoji, added });
+        if (fromPicker)
+            this.closePicker(c.id);
+    }
+    find(id) {
+        return this.comments().find((c) => c.id === id);
+    }
+    clearDraft(d) {
+        const key = this.draftKey(d);
+        this.drafts.update((all) => {
+            const { [key]: _, ...rest } = all;
+            return d === 'new' ? { ...rest, new: '' } : rest;
+        });
+    }
+    /** Un espacio duro alterno hace que el mismo texto cuente como cambio y se vuelva a anunciar. */
+    announce(text) {
+        this.announceFlip = !this.announceFlip;
+        this.announcement.set(this.announceFlip ? text : `${text} `);
+    }
+    focusLater(selector) {
+        afterNextRender(() => this.host.nativeElement.querySelector(selector)?.focus(), { injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbComments, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbComments, isStandalone: true, selector: "cb-comments", inputs: { comments: { classPropertyName: "comments", publicName: "comments", isSignal: true, isRequired: false, transformFunction: null }, activity: { classPropertyName: "activity", publicName: "activity", isSignal: true, isRequired: false, transformFunction: null }, currentUser: { classPropertyName: "currentUser", publicName: "currentUser", isSignal: true, isRequired: false, transformFunction: null }, people: { classPropertyName: "people", publicName: "people", isSignal: true, isRequired: false, transformFunction: null }, mentions: { classPropertyName: "mentions", publicName: "mentions", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null }, reactions: { classPropertyName: "reactions", publicName: "reactions", isSignal: true, isRequired: false, transformFunction: null }, replies: { classPropertyName: "replies", publicName: "replies", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, composer: { classPropertyName: "composer", publicName: "composer", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, editorHeight: { classPropertyName: "editorHeight", publicName: "editorHeight", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { comments: "commentsChange", filter: "filterChange", commentAdd: "commentAdd", commentEdit: "commentEdit", commentDelete: "commentDelete", reactionToggle: "reactionToggle" }, host: { classAttribute: "cb-comments" }, ngImport: i0, template: `
+    <section class="cb-comments__box" [attr.aria-label]="ariaLabel() || t().commentsFeed">
+      @if (showFilter()) {
+        <div class="cb-comments__filter" role="group" [attr.aria-label]="t().commentsShow">
+          @for (f of filters; track f) {
+            <button type="button" class="cb-comments__filter-btn" [attr.aria-pressed]="filter() === f" (click)="filter.set(f)">
+              {{ filterLabel(f) }}
+            </button>
+          }
+        </div>
+      }
+
+      @if (order() === 'newest') {
+        <ng-container [ngTemplateOutlet]="composerTpl" />
+      }
+
+      @if (feed().length) {
+        <ol class="cb-comments__feed">
+          @for (item of feed(); track itemKey(item)) {
+            @if (item.kind === 'activity') {
+              <li class="cb-comments__activity">
+                <cb-icon class="cb-comments__activity-icon" [name]="item.activity.icon || 'clock'" [size]="14" aria-hidden="true" />
+                <span class="cb-comments__activity-text">
+                  @if (item.activity.author; as who) {
+                    <strong>{{ who.name }}</strong>
+                  }
+                  {{ item.activity.text }}
+                </span>
+                <time class="cb-comments__time" [attr.datetime]="iso(item.activity.date)" [attr.title]="full(item.activity.date)">{{ rel(item.activity.date) }}</time>
+              </li>
+            } @else {
+              <li class="cb-comments__thread">
+                <ng-container [ngTemplateOutlet]="commentTpl" [ngTemplateOutletContext]="{ $implicit: item.comment, root: true }" />
+                @if (item.replies.length) {
+                  <ol class="cb-comments__replies" [attr.aria-label]="fmt(t().commentsRepliesTo, item.comment.author.name)">
+                    @for (r of item.replies; track r.id) {
+                      <li><ng-container [ngTemplateOutlet]="commentTpl" [ngTemplateOutletContext]="{ $implicit: r, root: false, parent: item.comment }" /></li>
+                    }
+                  </ol>
+                }
+                @if (isReplying(item.comment.id)) {
+                  <div class="cb-comments__reply-composer">
+                    <ng-container [ngTemplateOutlet]="editorTpl" [ngTemplateOutletContext]="{ $implicit: { reply: item.comment.id } }" />
+                  </div>
+                }
+              </li>
+            }
+          }
+        </ol>
+      } @else {
+        <p class="cb-comments__empty">{{ emptyMessage() ?? t().commentsEmpty }}</p>
+      }
+
+      @if (order() === 'oldest') {
+        <ng-container [ngTemplateOutlet]="composerTpl" />
+      }
+
+      <div class="cb-comments__sr" aria-live="polite">{{ announcement() }}</div>
+    </section>
+
+    <!-- Comentario (raíz o respuesta). -->
+    <ng-template #commentTpl let-c let-root="root" let-parent="parent">
+      <article class="cb-comment" [class.cb-comment--deleted]="c.deleted" [id]="domId(c.id)" tabindex="-1" [attr.aria-labelledby]="domId(c.id) + '-h'">
+        <cb-avatar class="cb-comment__avatar" [image]="c.author.image ?? ''" [label]="initials(c.author.name)" [size]="root ? 32 : 26" aria-hidden="true" />
+        <div class="cb-comment__main">
+          <div class="cb-comment__head" [id]="domId(c.id) + '-h'">
+            @if (!c.deleted) {
+              <span class="cb-comment__author">{{ c.author.name }}</span>
+            }
+            <time class="cb-comments__time" [attr.datetime]="iso(c.date)" [attr.title]="full(c.date)">{{ rel(c.date) }}</time>
+            @if (c.edited && !c.deleted) {
+              <span class="cb-comment__edited">({{ t().commentsEdited }})</span>
+            }
+          </div>
+
+          @if (c.deleted) {
+            <p class="cb-comment__deleted">{{ t().commentsDeleted }}</p>
+          } @else if (isEditing(c.id)) {
+            <ng-container [ngTemplateOutlet]="editorTpl" [ngTemplateOutletContext]="{ $implicit: { edit: c.id } }" />
+          } @else {
+            <div class="cb-comment__body" [innerHTML]="safe(c.html)"></div>
+
+            @if (c.reactions?.length || canAct()) {
+              <div class="cb-comment__footer">
+                @for (r of c.reactions ?? []; track r.emoji) {
+                  <button
+                    type="button"
+                    class="cb-comment__reaction"
+                    [attr.aria-pressed]="mine(r)"
+                    [attr.aria-label]="reactionLabel(r)"
+                    [attr.title]="reactionLabel(r)"
+                    [disabled]="!canAct()"
+                    (click)="react(c, r.emoji)"
+                  >
+                    <span aria-hidden="true">{{ r.emoji }}</span>
+                    <span aria-hidden="true">{{ r.by.length }}</span>
+                  </button>
+                }
+                @if (canAct()) {
+                  @if (reactions().length) {
+                    <span class="cb-comment__picker-wrap">
+                      <button
+                        type="button"
+                        class="cb-comment__action cb-comment__action--icon"
+                        [id]="domId(c.id) + '-react'"
+                        [attr.aria-label]="t().commentsAddReaction"
+                        [attr.title]="t().commentsAddReaction"
+                        [attr.aria-expanded]="picker() === c.id"
+                        (click)="togglePicker(c.id)"
+                      >
+                        <cb-icon name="cb-smile-plus" [size]="15" aria-hidden="true" />
+                      </button>
+                      @if (picker() === c.id) {
+                        <span
+                          class="cb-comment__picker"
+                          role="group"
+                          [attr.aria-label]="t().commentsReactions"
+                          (keydown.escape)="closePicker(c.id, $event)"
+                          (focusout)="onPickerFocusOut(c.id, $event)"
+                        >
+                          @for (e of reactions(); track e) {
+                            <button type="button" class="cb-comment__emoji" [attr.aria-pressed]="mineEmoji(c, e)" (click)="react(c, e, true)">{{ e }}</button>
+                          }
+                        </span>
+                      }
+                    </span>
+                  }
+                  @if (replies()) {
+                    <button type="button" class="cb-comment__action" [id]="domId(c.id) + '-reply'" (click)="startReply(root ? c : parent)">
+                      <cb-icon name="reply" [size]="14" aria-hidden="true" />
+                      {{ t().commentsReply }}
+                    </button>
+                  }
+                  @if (canManage(c)) {
+                    <button type="button" class="cb-comment__action" [id]="domId(c.id) + '-edit'" (click)="startEdit(c)">
+                      <cb-icon name="pencil" [size]="14" aria-hidden="true" />
+                      {{ t().commentsEdit }}
+                    </button>
+                    <button type="button" class="cb-comment__action" [id]="domId(c.id) + '-delete'" [attr.aria-expanded]="confirming() === c.id" (click)="askDelete(c.id)">
+                      <cb-icon name="trash" [size]="14" aria-hidden="true" />
+                      {{ t().commentsDelete }}
+                    </button>
+                  }
+                }
+              </div>
+            }
+
+            @if (confirming() === c.id) {
+              <div class="cb-comment__confirm" role="group" [attr.aria-label]="t().commentsDeleteConfirm" (keydown.escape)="cancelDelete(c.id)">
+                <span>{{ t().commentsDeleteConfirm }}</span>
+                <button type="button" class="cb-comments__btn cb-comments__btn--danger" [id]="domId(c.id) + '-confirm'" (click)="confirmDelete(c)">
+                  {{ t().commentsDelete }}
+                </button>
+                <button type="button" class="cb-comments__btn" (click)="cancelDelete(c.id)">{{ t().cancel }}</button>
+              </div>
+            }
+          }
+        </div>
+      </article>
+    </ng-template>
+
+    <!-- Caja para escribir: comentario nuevo, respuesta o edición. -->
+    <ng-template #editorTpl let-d>
+      <div class="cb-comments__editor" [attr.data-draft]="draftKey(d)" (keydown)="onEditorKeydown($event, d)">
+        <cb-editor
+          [value]="draftOf(d)"
+          (valueChange)="setDraft(d, $event)"
+          [toolbar]="toolbar()"
+          [mentions]="mentionSource()"
+          [placeholder]="placeholderOf(d)"
+          [ariaLabel]="editorLabel(d)"
+          [height]="editorHeight()"
+          maxHeight="16rem"
+          [wordCount]="false"
+          [images]="false"
+          [slashCommands]="false"
+          [bubbleMenu]="false"
+          fontsHref=""
+        />
+        <div class="cb-comments__editor-bar">
+          <span class="cb-comments__hint">{{ t().commentsShortcut }}</span>
+          @if (d !== 'new') {
+            <button type="button" class="cb-comments__btn" (click)="cancelDraft(d)">{{ t().cancel }}</button>
+          }
+          <button type="button" class="cb-comments__btn cb-comments__btn--primary" [disabled]="isEmpty(draftOf(d))" (click)="submit(d)">
+            {{ isEdit(d) ? t().save : d === 'new' ? t().commentsSend : t().commentsReply }}
+          </button>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #composerTpl>
+      @if (canAct() && composer()) {
+        <div class="cb-comments__composer">
+          <cb-avatar class="cb-comment__avatar" [image]="currentUser()!.image ?? ''" [label]="initials(currentUser()!.name)" [size]="32" aria-hidden="true" />
+          <ng-container [ngTemplateOutlet]="editorTpl" [ngTemplateOutletContext]="{ $implicit: 'new' }" />
+        </div>
+      }
+    </ng-template>
+  `, isInline: true, styles: [".cb-comments{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-comments__box{display:flex;flex-direction:column;gap:1rem}.cb-comments__filter{display:inline-flex;align-self:flex-start;padding:2px;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px)}.cb-comments__filter-btn{padding:.25rem .75rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-comments__filter-btn:hover{color:var(--cb-color-text)}.cb-comments__filter-btn[aria-pressed=true]{background:var(--cb-color-surface-active, var(--cb-color-surface-hover));color:var(--cb-color-text)}.cb-comments__feed,.cb-comments__replies{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.cb-comments__feed{gap:1rem}.cb-comments__replies{gap:.75rem;margin:.75rem 0 0 2.75rem;padding-left:.75rem;border-left:2px solid var(--cb-color-border)}.cb-comments__reply-composer{margin:.75rem 0 0 2.75rem}.cb-comments__empty{margin:0;color:var(--cb-color-text-muted)}.cb-comments__time{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);white-space:nowrap}.cb-comments__activity{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem;padding-left:.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-comments__activity-icon{align-self:center;flex:none}.cb-comments__activity-text strong{color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium, 500)}.cb-comment{display:flex;gap:.75rem;border-radius:var(--cb-radius-md, 6px)}.cb-comment:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:4px}.cb-comment__avatar{flex:none}.cb-comment__main{display:flex;flex:1;flex-direction:column;gap:.25rem;min-width:0}.cb-comment__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem}.cb-comment__author{font-weight:var(--cb-font-weight-semibold, 600)}.cb-comment__edited{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-comment__deleted{margin:0;color:var(--cb-color-text-muted);font-style:italic}.cb-comment__body{line-height:1.5;overflow-wrap:anywhere}.cb-comment__body>:first-child{margin-top:0}.cb-comment__body>:last-child{margin-bottom:0}.cb-comment__body p,.cb-comment__body ul,.cb-comment__body ol{margin:0 0 .5rem}.cb-comment__body ul,.cb-comment__body ol{padding-left:1.25rem}.cb-comment__body a{color:var(--cb-color-primary)}.cb-comment__body code{padding:.0625rem .25rem;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-hover);font-size:.85em}.cb-comment__body [data-mention]{padding:0 .1875rem;border-radius:var(--cb-radius-sm, 4px);background:color-mix(in srgb,var(--cb-color-primary) 16%,transparent);color:var(--cb-color-text-strong, var(--cb-color-text));font-weight:var(--cb-font-weight-medium, 500)}.cb-comment__body [data-mention][data-self]{background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-comment__footer{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin-top:.125rem}.cb-comment__reaction{display:inline-flex;align-items:center;gap:.25rem;min-height:1.75rem;padding:0 .5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-xs, .75rem);cursor:pointer}.cb-comment__reaction:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-comment__reaction[aria-pressed=true]{border-color:var(--cb-color-primary);background:color-mix(in srgb,var(--cb-color-primary) 14%,transparent)}.cb-comment__reaction:disabled{cursor:default}.cb-comment__action{display:inline-flex;align-items:center;gap:.25rem;min-height:1.75rem;padding:0 .375rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);cursor:pointer}.cb-comment__action:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-comment__action--icon{justify-content:center;width:1.75rem;padding:0}.cb-comment__picker-wrap{position:relative;display:inline-flex}.cb-comment__picker{position:absolute;bottom:calc(100% + 4px);left:0;z-index:5;display:flex;gap:2px;padding:.25rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-surface, #fff);box-shadow:var(--cb-shadow-md, 0 4px 12px rgba(0, 0, 0, .12))}.cb-comment__emoji{width:2rem;height:2rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;font-size:1.125rem;line-height:1;cursor:pointer}.cb-comment__emoji:hover,.cb-comment__emoji[aria-pressed=true]{background:var(--cb-color-surface-hover)}.cb-comment__confirm{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--cb-color-danger);border-radius:var(--cb-radius-md, 6px)}.cb-comments__composer{display:flex;gap:.75rem}.cb-comments__editor{display:flex;flex:1;flex-direction:column;gap:.5rem;min-width:0}.cb-comments .cb-comments__editor .cb-editor{overflow:visible}.cb-comments .cb-comments__editor .cb-editor__toolbar{border-top-left-radius:inherit;border-top-right-radius:inherit}.cb-comments__editor-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.cb-comments__hint{margin-right:auto;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-comments__btn{min-height:2rem;padding:0 .875rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-comments__btn:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-comments__btn:disabled{opacity:.5;cursor:not-allowed}.cb-comments__btn--primary{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-comments__btn--primary:hover:not(:disabled){background:var(--cb-color-primary-700, var(--cb-color-primary))}.cb-comments__btn--danger{border-color:var(--cb-color-danger);background:var(--cb-color-danger);color:var(--cb-color-danger-contrast, #fff)}.cb-comments__btn--danger:hover:not(:disabled){background:var(--cb-color-danger-700, var(--cb-color-danger))}.cb-comments__filter-btn:focus-visible,.cb-comment__reaction:focus-visible,.cb-comment__action:focus-visible,.cb-comment__emoji:focus-visible,.cb-comments__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-comments__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(max-width:30rem){.cb-comments__replies,.cb-comments__reply-composer{margin-left:1rem}.cb-comments__hint{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbAvatar, selector: "cb-avatar", inputs: ["image", "label", "icon", "size", "shape", "severity", "ariaLabel"] }, { kind: "component", type: CbEditor, selector: "cb-editor", inputs: ["placeholder", "ariaLabel", "height", "maxHeight", "wordCount", "disabled", "readonly", "invalid", "required", "toolbar", "maxLength", "images", "imageUpload", "maxImageSize", "pastePlainText", "fonts", "fontsHref", "bubbleMenu", "slashCommands", "autolink", "typography", "mentions", "autosaveKey", "autosaveDelay", "value"], outputs: ["valueChange", "mentionAdd", "imageError"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbComments, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-comments', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, CbAvatar, CbEditor, CbIcon], host: { class: 'cb-comments' }, template: `
+    <section class="cb-comments__box" [attr.aria-label]="ariaLabel() || t().commentsFeed">
+      @if (showFilter()) {
+        <div class="cb-comments__filter" role="group" [attr.aria-label]="t().commentsShow">
+          @for (f of filters; track f) {
+            <button type="button" class="cb-comments__filter-btn" [attr.aria-pressed]="filter() === f" (click)="filter.set(f)">
+              {{ filterLabel(f) }}
+            </button>
+          }
+        </div>
+      }
+
+      @if (order() === 'newest') {
+        <ng-container [ngTemplateOutlet]="composerTpl" />
+      }
+
+      @if (feed().length) {
+        <ol class="cb-comments__feed">
+          @for (item of feed(); track itemKey(item)) {
+            @if (item.kind === 'activity') {
+              <li class="cb-comments__activity">
+                <cb-icon class="cb-comments__activity-icon" [name]="item.activity.icon || 'clock'" [size]="14" aria-hidden="true" />
+                <span class="cb-comments__activity-text">
+                  @if (item.activity.author; as who) {
+                    <strong>{{ who.name }}</strong>
+                  }
+                  {{ item.activity.text }}
+                </span>
+                <time class="cb-comments__time" [attr.datetime]="iso(item.activity.date)" [attr.title]="full(item.activity.date)">{{ rel(item.activity.date) }}</time>
+              </li>
+            } @else {
+              <li class="cb-comments__thread">
+                <ng-container [ngTemplateOutlet]="commentTpl" [ngTemplateOutletContext]="{ $implicit: item.comment, root: true }" />
+                @if (item.replies.length) {
+                  <ol class="cb-comments__replies" [attr.aria-label]="fmt(t().commentsRepliesTo, item.comment.author.name)">
+                    @for (r of item.replies; track r.id) {
+                      <li><ng-container [ngTemplateOutlet]="commentTpl" [ngTemplateOutletContext]="{ $implicit: r, root: false, parent: item.comment }" /></li>
+                    }
+                  </ol>
+                }
+                @if (isReplying(item.comment.id)) {
+                  <div class="cb-comments__reply-composer">
+                    <ng-container [ngTemplateOutlet]="editorTpl" [ngTemplateOutletContext]="{ $implicit: { reply: item.comment.id } }" />
+                  </div>
+                }
+              </li>
+            }
+          }
+        </ol>
+      } @else {
+        <p class="cb-comments__empty">{{ emptyMessage() ?? t().commentsEmpty }}</p>
+      }
+
+      @if (order() === 'oldest') {
+        <ng-container [ngTemplateOutlet]="composerTpl" />
+      }
+
+      <div class="cb-comments__sr" aria-live="polite">{{ announcement() }}</div>
+    </section>
+
+    <!-- Comentario (raíz o respuesta). -->
+    <ng-template #commentTpl let-c let-root="root" let-parent="parent">
+      <article class="cb-comment" [class.cb-comment--deleted]="c.deleted" [id]="domId(c.id)" tabindex="-1" [attr.aria-labelledby]="domId(c.id) + '-h'">
+        <cb-avatar class="cb-comment__avatar" [image]="c.author.image ?? ''" [label]="initials(c.author.name)" [size]="root ? 32 : 26" aria-hidden="true" />
+        <div class="cb-comment__main">
+          <div class="cb-comment__head" [id]="domId(c.id) + '-h'">
+            @if (!c.deleted) {
+              <span class="cb-comment__author">{{ c.author.name }}</span>
+            }
+            <time class="cb-comments__time" [attr.datetime]="iso(c.date)" [attr.title]="full(c.date)">{{ rel(c.date) }}</time>
+            @if (c.edited && !c.deleted) {
+              <span class="cb-comment__edited">({{ t().commentsEdited }})</span>
+            }
+          </div>
+
+          @if (c.deleted) {
+            <p class="cb-comment__deleted">{{ t().commentsDeleted }}</p>
+          } @else if (isEditing(c.id)) {
+            <ng-container [ngTemplateOutlet]="editorTpl" [ngTemplateOutletContext]="{ $implicit: { edit: c.id } }" />
+          } @else {
+            <div class="cb-comment__body" [innerHTML]="safe(c.html)"></div>
+
+            @if (c.reactions?.length || canAct()) {
+              <div class="cb-comment__footer">
+                @for (r of c.reactions ?? []; track r.emoji) {
+                  <button
+                    type="button"
+                    class="cb-comment__reaction"
+                    [attr.aria-pressed]="mine(r)"
+                    [attr.aria-label]="reactionLabel(r)"
+                    [attr.title]="reactionLabel(r)"
+                    [disabled]="!canAct()"
+                    (click)="react(c, r.emoji)"
+                  >
+                    <span aria-hidden="true">{{ r.emoji }}</span>
+                    <span aria-hidden="true">{{ r.by.length }}</span>
+                  </button>
+                }
+                @if (canAct()) {
+                  @if (reactions().length) {
+                    <span class="cb-comment__picker-wrap">
+                      <button
+                        type="button"
+                        class="cb-comment__action cb-comment__action--icon"
+                        [id]="domId(c.id) + '-react'"
+                        [attr.aria-label]="t().commentsAddReaction"
+                        [attr.title]="t().commentsAddReaction"
+                        [attr.aria-expanded]="picker() === c.id"
+                        (click)="togglePicker(c.id)"
+                      >
+                        <cb-icon name="cb-smile-plus" [size]="15" aria-hidden="true" />
+                      </button>
+                      @if (picker() === c.id) {
+                        <span
+                          class="cb-comment__picker"
+                          role="group"
+                          [attr.aria-label]="t().commentsReactions"
+                          (keydown.escape)="closePicker(c.id, $event)"
+                          (focusout)="onPickerFocusOut(c.id, $event)"
+                        >
+                          @for (e of reactions(); track e) {
+                            <button type="button" class="cb-comment__emoji" [attr.aria-pressed]="mineEmoji(c, e)" (click)="react(c, e, true)">{{ e }}</button>
+                          }
+                        </span>
+                      }
+                    </span>
+                  }
+                  @if (replies()) {
+                    <button type="button" class="cb-comment__action" [id]="domId(c.id) + '-reply'" (click)="startReply(root ? c : parent)">
+                      <cb-icon name="reply" [size]="14" aria-hidden="true" />
+                      {{ t().commentsReply }}
+                    </button>
+                  }
+                  @if (canManage(c)) {
+                    <button type="button" class="cb-comment__action" [id]="domId(c.id) + '-edit'" (click)="startEdit(c)">
+                      <cb-icon name="pencil" [size]="14" aria-hidden="true" />
+                      {{ t().commentsEdit }}
+                    </button>
+                    <button type="button" class="cb-comment__action" [id]="domId(c.id) + '-delete'" [attr.aria-expanded]="confirming() === c.id" (click)="askDelete(c.id)">
+                      <cb-icon name="trash" [size]="14" aria-hidden="true" />
+                      {{ t().commentsDelete }}
+                    </button>
+                  }
+                }
+              </div>
+            }
+
+            @if (confirming() === c.id) {
+              <div class="cb-comment__confirm" role="group" [attr.aria-label]="t().commentsDeleteConfirm" (keydown.escape)="cancelDelete(c.id)">
+                <span>{{ t().commentsDeleteConfirm }}</span>
+                <button type="button" class="cb-comments__btn cb-comments__btn--danger" [id]="domId(c.id) + '-confirm'" (click)="confirmDelete(c)">
+                  {{ t().commentsDelete }}
+                </button>
+                <button type="button" class="cb-comments__btn" (click)="cancelDelete(c.id)">{{ t().cancel }}</button>
+              </div>
+            }
+          }
+        </div>
+      </article>
+    </ng-template>
+
+    <!-- Caja para escribir: comentario nuevo, respuesta o edición. -->
+    <ng-template #editorTpl let-d>
+      <div class="cb-comments__editor" [attr.data-draft]="draftKey(d)" (keydown)="onEditorKeydown($event, d)">
+        <cb-editor
+          [value]="draftOf(d)"
+          (valueChange)="setDraft(d, $event)"
+          [toolbar]="toolbar()"
+          [mentions]="mentionSource()"
+          [placeholder]="placeholderOf(d)"
+          [ariaLabel]="editorLabel(d)"
+          [height]="editorHeight()"
+          maxHeight="16rem"
+          [wordCount]="false"
+          [images]="false"
+          [slashCommands]="false"
+          [bubbleMenu]="false"
+          fontsHref=""
+        />
+        <div class="cb-comments__editor-bar">
+          <span class="cb-comments__hint">{{ t().commentsShortcut }}</span>
+          @if (d !== 'new') {
+            <button type="button" class="cb-comments__btn" (click)="cancelDraft(d)">{{ t().cancel }}</button>
+          }
+          <button type="button" class="cb-comments__btn cb-comments__btn--primary" [disabled]="isEmpty(draftOf(d))" (click)="submit(d)">
+            {{ isEdit(d) ? t().save : d === 'new' ? t().commentsSend : t().commentsReply }}
+          </button>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #composerTpl>
+      @if (canAct() && composer()) {
+        <div class="cb-comments__composer">
+          <cb-avatar class="cb-comment__avatar" [image]="currentUser()!.image ?? ''" [label]="initials(currentUser()!.name)" [size]="32" aria-hidden="true" />
+          <ng-container [ngTemplateOutlet]="editorTpl" [ngTemplateOutletContext]="{ $implicit: 'new' }" />
+        </div>
+      }
+    </ng-template>
+  `, styles: [".cb-comments{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-comments__box{display:flex;flex-direction:column;gap:1rem}.cb-comments__filter{display:inline-flex;align-self:flex-start;padding:2px;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px)}.cb-comments__filter-btn{padding:.25rem .75rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-comments__filter-btn:hover{color:var(--cb-color-text)}.cb-comments__filter-btn[aria-pressed=true]{background:var(--cb-color-surface-active, var(--cb-color-surface-hover));color:var(--cb-color-text)}.cb-comments__feed,.cb-comments__replies{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.cb-comments__feed{gap:1rem}.cb-comments__replies{gap:.75rem;margin:.75rem 0 0 2.75rem;padding-left:.75rem;border-left:2px solid var(--cb-color-border)}.cb-comments__reply-composer{margin:.75rem 0 0 2.75rem}.cb-comments__empty{margin:0;color:var(--cb-color-text-muted)}.cb-comments__time{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);white-space:nowrap}.cb-comments__activity{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem;padding-left:.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-comments__activity-icon{align-self:center;flex:none}.cb-comments__activity-text strong{color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium, 500)}.cb-comment{display:flex;gap:.75rem;border-radius:var(--cb-radius-md, 6px)}.cb-comment:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:4px}.cb-comment__avatar{flex:none}.cb-comment__main{display:flex;flex:1;flex-direction:column;gap:.25rem;min-width:0}.cb-comment__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem}.cb-comment__author{font-weight:var(--cb-font-weight-semibold, 600)}.cb-comment__edited{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-comment__deleted{margin:0;color:var(--cb-color-text-muted);font-style:italic}.cb-comment__body{line-height:1.5;overflow-wrap:anywhere}.cb-comment__body>:first-child{margin-top:0}.cb-comment__body>:last-child{margin-bottom:0}.cb-comment__body p,.cb-comment__body ul,.cb-comment__body ol{margin:0 0 .5rem}.cb-comment__body ul,.cb-comment__body ol{padding-left:1.25rem}.cb-comment__body a{color:var(--cb-color-primary)}.cb-comment__body code{padding:.0625rem .25rem;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-hover);font-size:.85em}.cb-comment__body [data-mention]{padding:0 .1875rem;border-radius:var(--cb-radius-sm, 4px);background:color-mix(in srgb,var(--cb-color-primary) 16%,transparent);color:var(--cb-color-text-strong, var(--cb-color-text));font-weight:var(--cb-font-weight-medium, 500)}.cb-comment__body [data-mention][data-self]{background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-comment__footer{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin-top:.125rem}.cb-comment__reaction{display:inline-flex;align-items:center;gap:.25rem;min-height:1.75rem;padding:0 .5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-xs, .75rem);cursor:pointer}.cb-comment__reaction:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-comment__reaction[aria-pressed=true]{border-color:var(--cb-color-primary);background:color-mix(in srgb,var(--cb-color-primary) 14%,transparent)}.cb-comment__reaction:disabled{cursor:default}.cb-comment__action{display:inline-flex;align-items:center;gap:.25rem;min-height:1.75rem;padding:0 .375rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);cursor:pointer}.cb-comment__action:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-comment__action--icon{justify-content:center;width:1.75rem;padding:0}.cb-comment__picker-wrap{position:relative;display:inline-flex}.cb-comment__picker{position:absolute;bottom:calc(100% + 4px);left:0;z-index:5;display:flex;gap:2px;padding:.25rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-surface, #fff);box-shadow:var(--cb-shadow-md, 0 4px 12px rgba(0, 0, 0, .12))}.cb-comment__emoji{width:2rem;height:2rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;font-size:1.125rem;line-height:1;cursor:pointer}.cb-comment__emoji:hover,.cb-comment__emoji[aria-pressed=true]{background:var(--cb-color-surface-hover)}.cb-comment__confirm{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--cb-color-danger);border-radius:var(--cb-radius-md, 6px)}.cb-comments__composer{display:flex;gap:.75rem}.cb-comments__editor{display:flex;flex:1;flex-direction:column;gap:.5rem;min-width:0}.cb-comments .cb-comments__editor .cb-editor{overflow:visible}.cb-comments .cb-comments__editor .cb-editor__toolbar{border-top-left-radius:inherit;border-top-right-radius:inherit}.cb-comments__editor-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.cb-comments__hint{margin-right:auto;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-comments__btn{min-height:2rem;padding:0 .875rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-comments__btn:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-comments__btn:disabled{opacity:.5;cursor:not-allowed}.cb-comments__btn--primary{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-comments__btn--primary:hover:not(:disabled){background:var(--cb-color-primary-700, var(--cb-color-primary))}.cb-comments__btn--danger{border-color:var(--cb-color-danger);background:var(--cb-color-danger);color:var(--cb-color-danger-contrast, #fff)}.cb-comments__btn--danger:hover:not(:disabled){background:var(--cb-color-danger-700, var(--cb-color-danger))}.cb-comments__filter-btn:focus-visible,.cb-comment__reaction:focus-visible,.cb-comment__action:focus-visible,.cb-comment__emoji:focus-visible,.cb-comments__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-comments__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(max-width:30rem){.cb-comments__replies,.cb-comments__reply-composer{margin-left:1rem}.cb-comments__hint{display:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { comments: [{ type: i0.Input, args: [{ isSignal: true, alias: "comments", required: false }] }, { type: i0.Output, args: ["commentsChange"] }], activity: [{ type: i0.Input, args: [{ isSignal: true, alias: "activity", required: false }] }], currentUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUser", required: false }] }], people: [{ type: i0.Input, args: [{ isSignal: true, alias: "people", required: false }] }], mentions: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentions", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], reactions: [{ type: i0.Input, args: [{ isSignal: true, alias: "reactions", required: false }] }], replies: [{ type: i0.Input, args: [{ isSignal: true, alias: "replies", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], composer: [{ type: i0.Input, args: [{ isSignal: true, alias: "composer", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], editorHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorHeight", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], commentAdd: [{ type: i0.Output, args: ["commentAdd"] }], commentEdit: [{ type: i0.Output, args: ["commentEdit"] }], commentDelete: [{ type: i0.Output, args: ["commentDelete"] }], reactionToggle: [{ type: i0.Output, args: ["reactionToggle"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/comments
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CB_COMMENTS_TOOLBAR, CbComments, mentionIds as cbCommentMentions, removeComment as cbRemoveComment, toggleReaction as cbToggleReaction };