@caribeng/ui 22.2.0 → 22.4.0

package/fesm2022/caribeng-ui-mentions.mjs

@@ -0,0 +1,495 @@
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, Injector, viewChild, model, input, booleanAttribute, output, signal, computed, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { injectCbTranslation, cbFieldState, cbFormat } from '@caribeng/ui';
+
+/** Propiedades que afectan a cómo se reparte el texto en líneas. */
+const MIRRORED = [
+    'boxSizing',
+    'width',
+    'height',
+    'overflowX',
+    'overflowY',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'fontStyle',
+    'fontVariant',
+    'fontWeight',
+    'fontStretch',
+    'fontSize',
+    'lineHeight',
+    'fontFamily',
+    'textAlign',
+    'textTransform',
+    'textIndent',
+    'letterSpacing',
+    'wordSpacing',
+    'tabSize',
+];
+/**
+ * Posición (px, relativa al campo) del carácter `index` de un textarea o
+ * input, con un div espejo invisible que copia su tipografía y su ancho.
+ * Sirve para abrir el panel de sugerencias justo bajo lo que se escribe.
+ */
+function cbCaretCoordinates(field, index) {
+    const doc = field.ownerDocument;
+    const style = doc.defaultView?.getComputedStyle(field);
+    const mirror = doc.createElement('div');
+    const isInput = field.nodeName === 'INPUT';
+    mirror.style.position = 'absolute';
+    mirror.style.visibility = 'hidden';
+    mirror.style.top = '0';
+    mirror.style.left = '-9999px';
+    mirror.style.whiteSpace = isInput ? 'nowrap' : 'pre-wrap';
+    mirror.style.overflowWrap = 'break-word';
+    if (style)
+        for (const prop of MIRRORED)
+            mirror.style[prop] = style[prop];
+    mirror.textContent = field.value.slice(0, index);
+    const marker = doc.createElement('span');
+    marker.textContent = field.value.slice(index) || '.';
+    mirror.appendChild(marker);
+    doc.body.appendChild(mirror);
+    const lineHeight = parseFloat(style?.lineHeight ?? '') || parseFloat(style?.fontSize ?? '') * 1.2 || 18;
+    const result = {
+        top: marker.offsetTop + (parseFloat(style?.borderTopWidth ?? '') || 0) - field.scrollTop,
+        left: marker.offsetLeft + (parseFloat(style?.borderLeftWidth ?? '') || 0) - field.scrollLeft,
+        height: lineHeight,
+    };
+    mirror.remove();
+    return result;
+}
+
+let nextUid = 0;
+const normalize = (text) => text.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+/**
+ * Campo de texto con menciones de CaribeNG: al escribir `@` (u otro
+ * disparador como `#`) muestra sugerencias junto al cursor, que se filtran
+ * sin tildes y se eligen con el teclado o el ratón. Funciona con Angular Forms
+ * (el valor es el texto) y emite las menciones presentes con su `id`.
+ *
+ * @example
+ * ```html
+ * <cb-mentions label="Comentario" [suggestions]="equipo" formControlName="comentario" (mentionsChange)="menciones = $event" />
+ * ```
+ */
+class CbMentions {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.overlay = inject(Overlay);
+        this.vcr = inject(ViewContainerRef);
+        this.injector = inject(Injector);
+        this.fieldEl = viewChild.required('field');
+        this.panelTpl = viewChild.required('panel');
+        this.overlayRef = null;
+        this.inputId = `cb-mentions-${++nextUid}`;
+        this.listId = `${this.inputId}-list`;
+        /** Texto (bidireccional y con Angular Forms). */
+        this.value = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Elementos mencionables. Cada uno puede indicar su `trigger`. */
+        this.suggestions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+        /** Caracteres que abren las sugerencias. */
+        this.triggers = input(['@'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
+        /** Filtra `suggestions` con lo escrito. Desactívalo si llegan ya filtradas del servidor. */
+        this.filter = input(true, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Máximo de sugerencias visibles. */
+        this.maxResults = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxResults" }] : /* istanbul ignore next */ []));
+        /** Muestra "Cargando" mientras no hay sugerencias. */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.hint = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible sin `label` visible. */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.rows = input(3, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.requiredIndicator = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requiredIndicator" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Lo escrito tras el disparador (para pedir sugerencias). */
+        this.search = output();
+        /** Menciones presentes en el texto, cada vez que cambian. */
+        this.mentionsChange = output();
+        this.fieldState = cbFieldState({
+            invalid: () => this.invalid(),
+            required: () => this.required(),
+            requiredIndicator: () => this.requiredIndicator(),
+        });
+        this.cvaDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.query = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        this.open = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.active = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        /** Menciones elegidas (se conservan mientras su texto siga en el campo). */
+        this.chosen = [];
+        this.lastMentions = '';
+        this.results = computed(() => {
+            const q = this.query();
+            if (!q)
+                return [];
+            const items = this.suggestions().filter((s) => (s.trigger ?? '@') === q.trigger);
+            if (!this.filter())
+                return items.slice(0, this.maxResults());
+            const needle = normalize(q.query);
+            const scored = items
+                .map((item) => {
+                const label = normalize(item.label);
+                const score = !needle ? 1 : label.startsWith(needle) ? 3 : label.split(/\s+/).some((w) => w.startsWith(needle)) ? 2 : label.includes(needle) ? 1 : 0;
+                return { item, score };
+            })
+                .filter((e) => e.score > 0)
+                .sort((a, b) => b.score - a.score);
+            return scored.slice(0, this.maxResults()).map((e) => e.item);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []));
+        this.activeId = computed(() => (this.results().length ? `${this.listId}-${this.active()}` : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    initials(item) {
+        return item.label
+            .split(/\s+/)
+            .filter(Boolean)
+            .slice(0, 2)
+            .map((w) => w.charAt(0).toUpperCase())
+            .join('');
+    }
+    // --- ControlValueAccessor ---------------------------------------------------
+    writeValue(value) {
+        this.value.set(value ?? '');
+        this.syncMentions(false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- Escritura ----------------------------------------------------------------
+    onInput(event) {
+        const text = event.target.value;
+        this.value.set(text);
+        this.onChange(text);
+        this.syncMentions(true);
+        this.detect();
+    }
+    onBlur() {
+        this.onTouched();
+        this.close();
+    }
+    /** Busca un disparador justo antes del cursor y abre (o cierra) las sugerencias. */
+    detect() {
+        const el = this.fieldEl().nativeElement;
+        const caret = el.selectionStart ?? el.value.length;
+        if (el.selectionEnd !== caret)
+            return this.close();
+        const before = el.value.slice(0, caret);
+        let found = null;
+        for (const trigger of this.triggers()) {
+            const start = before.lastIndexOf(trigger);
+            if (start < 0 || (start > 0 && !/\s|[([{"'¿¡]/.test(before[start - 1])))
+                continue;
+            const query = before.slice(start + trigger.length);
+            // Admite nombres con espacios, pero no saltos de línea ni búsquedas larguísimas.
+            if (/\n/.test(query) || query.length > 40 || /\s{2}/.test(query))
+                continue;
+            if (!found || start > found.start)
+                found = { trigger, query, start };
+        }
+        if (!found)
+            return this.close();
+        const previous = this.query();
+        this.query.set(found);
+        if (previous?.query !== found.query || previous.trigger !== found.trigger) {
+            this.active.set(0);
+            this.search.emit({ trigger: found.trigger, query: found.query });
+        }
+        // Con un espacio y sin resultados, se entiende que ya no es una mención.
+        if (/\s/.test(found.query) && !this.results().length && !this.loading())
+            return this.close();
+        this.openPanel(found.start);
+        this.announcement.set(this.results().length ? cbFormat(this.t().mentionsCount, this.results().length) : this.t().noResults);
+    }
+    onKeydown(event) {
+        if (!this.open())
+            return;
+        const count = this.results().length;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                if (!count)
+                    return;
+                event.preventDefault();
+                this.active.set((this.active() + (event.key === 'ArrowDown' ? 1 : -1) + count) % count);
+                this.scrollActiveIntoView();
+                break;
+            case 'Enter':
+            case 'Tab': {
+                const item = this.results()[this.active()];
+                if (!item)
+                    return;
+                event.preventDefault();
+                this.choose(item);
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.close();
+                break;
+        }
+    }
+    /** Inserta la mención elegida en lugar de lo escrito tras el disparador. */
+    choose(item) {
+        const q = this.query();
+        const el = this.fieldEl().nativeElement;
+        if (!q)
+            return;
+        const caret = el.selectionStart ?? el.value.length;
+        const inserted = `${q.trigger}${item.label} `;
+        const text = el.value.slice(0, q.start) + inserted + el.value.slice(caret);
+        const position = q.start + inserted.length;
+        this.value.set(text);
+        el.value = text;
+        el.setSelectionRange(position, position);
+        this.chosen = [...this.chosen.filter((m) => !(m.id === item.id && m.trigger === q.trigger)), { id: item.id, label: item.label, trigger: q.trigger }];
+        this.onChange(text);
+        this.close();
+        this.syncMentions(true);
+        el.focus();
+    }
+    /** Quita las menciones cuyo texto ya no está y avisa si cambió la lista. */
+    syncMentions(emit) {
+        const text = this.value();
+        this.chosen = this.chosen.filter((m) => text.includes(`${m.trigger}${m.label}`));
+        const signature = JSON.stringify(this.chosen.map((m) => `${m.trigger}${m.id}`));
+        if (signature === this.lastMentions)
+            return;
+        this.lastMentions = signature;
+        if (emit)
+            this.mentionsChange.emit([...this.chosen]);
+    }
+    // --- Panel ---------------------------------------------------------------------
+    openPanel(start) {
+        const el = this.fieldEl().nativeElement;
+        const rect = el.getBoundingClientRect();
+        const caret = cbCaretCoordinates(el, start);
+        const origin = { x: rect.left + caret.left, y: rect.top + caret.top + caret.height };
+        if (this.overlayRef) {
+            this.overlayRef.updatePositionStrategy(this.position(origin));
+            return;
+        }
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.position(origin),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        this.overlayRef.attach(new TemplatePortal(this.panelTpl(), this.vcr));
+        this.open.set(true);
+    }
+    position(origin) {
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(origin)
+            .withPositions([
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -24 },
+        ])
+            .withPush(true);
+    }
+    /** Cierra las sugerencias. */
+    close() {
+        this.query.set(null);
+        if (!this.overlayRef)
+            return;
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.open.set(false);
+        this.announcement.set('');
+    }
+    scrollActiveIntoView() {
+        const id = this.activeId();
+        afterNextRender(() => (id ? this.overlayRef?.overlayElement.querySelector(`#${id}`)?.scrollIntoView?.({ block: 'nearest' }) : null), {
+            injector: this.injector,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMentions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMentions, isStandalone: true, selector: "cb-mentions", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, triggers: { classPropertyName: "triggers", publicName: "triggers", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, requiredIndicator: { classPropertyName: "requiredIndicator", publicName: "requiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", mentionsChange: "mentionsChange" }, host: { classAttribute: "cb-mentions" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbMentions), multi: true }], viewQueries: [{ propertyName: "fieldEl", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label class="cb-mentions__label" [attr.for]="inputId">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span [class]="'cb-mentions__required cb-mentions__required--' + mark.kind" [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'">{{ mark.text }}</span>
+        }
+      </label>
+    }
+    <textarea
+      #field
+      class="cb-mentions__field"
+      [class.cb-is-invalid]="fieldState.invalid()"
+      [id]="inputId"
+      [rows]="rows()"
+      [value]="value()"
+      [placeholder]="placeholder()"
+      [disabled]="isDisabled()"
+      [required]="fieldState.required()"
+      aria-autocomplete="list"
+      [attr.aria-controls]="open() ? listId : null"
+      [attr.aria-activedescendant]="open() ? activeId() : null"
+      [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+      [attr.aria-describedby]="hint() ? inputId + '-hint' : null"
+      [attr.aria-label]="label() ? null : (ariaLabel() || null)"
+      (input)="onInput($event)"
+      (keydown)="onKeydown($event)"
+      (click)="detect()"
+      (blur)="onBlur()"
+    ></textarea>
+    @if (hint()) {
+      <p class="cb-mentions__hint" [id]="inputId + '-hint'">{{ hint() }}</p>
+    }
+    <div class="cb-mentions__sr" role="status">{{ announcement() }}</div>
+
+    <ng-template #panel>
+      <ul class="cb-mentions__panel" role="listbox" [id]="listId" [attr.aria-label]="label() || ariaLabel() || null">
+        @for (item of results(); track item.id; let i = $index) {
+          <li
+            class="cb-mentions__option"
+            role="option"
+            [id]="listId + '-' + i"
+            [class.cb-mentions__option--active]="i === active()"
+            [attr.aria-selected]="i === active()"
+            (mousedown)="$event.preventDefault()"
+            (mousemove)="active.set(i)"
+            (click)="choose(item)"
+          >
+            <span class="cb-mentions__avatar" aria-hidden="true">
+              @if (item.avatar) {
+                <img [src]="item.avatar" alt="" />
+              } @else {
+                {{ initials(item) }}
+              }
+            </span>
+            <span class="cb-mentions__text">
+              <span class="cb-mentions__name">{{ item.label }}</span>
+              @if (item.description) {
+                <span class="cb-mentions__description">{{ item.description }}</span>
+              }
+            </span>
+          </li>
+        } @empty {
+          <li class="cb-mentions__empty" role="presentation">{{ loading() ? t().loading : t().noResults }}</li>
+        }
+      </ul>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans)}.cb-mentions__label{display:block;margin-bottom:var(--cb-space-1);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-mentions__required{margin-left:2px;color:var(--cb-color-danger)}.cb-mentions__required--required,.cb-mentions__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}.cb-mentions__field{box-sizing:border-box;display:block;width:100%;padding:var(--cb-space-2) var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-base);line-height:1.5;resize:vertical;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-mentions__field::placeholder{color:var(--cb-color-text-muted)}.cb-mentions__field:hover:not(:disabled):not(:focus){border-color:var(--cb-color-text-muted)}.cb-mentions__field:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-mentions__field.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-mentions__field:disabled{cursor:not-allowed;background-color:var(--cb-color-surface);color:var(--cb-color-text-muted)}.cb-mentions__hint{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm)}.cb-mentions__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.cb-mentions__panel{width:18rem;max-width:calc(100vw - 2rem);max-height:16rem;margin:0;padding:.375rem;overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans);list-style:none}.cb-mentions__option{display:flex;align-items:center;gap:.625rem;padding:.375rem .5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-mentions__option--active{background:var(--cb-color-surface-hover);box-shadow:inset 3px 0 0 var(--cb-color-primary)}.cb-mentions__avatar{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--cb-color-primary) 14%,transparent);color:var(--cb-color-primary);font-size:.6875rem;font-weight:var(--cb-font-weight-semibold, 600)}.cb-mentions__avatar img{width:100%;height:100%;object-fit:cover}.cb-mentions__text{display:flex;flex-direction:column;min-width:0}.cb-mentions__name,.cb-mentions__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-mentions__description{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-mentions__empty{padding:.75rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMentions, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-mentions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-mentions' }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbMentions), multi: true }], template: `
+    @if (label()) {
+      <label class="cb-mentions__label" [attr.for]="inputId">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span [class]="'cb-mentions__required cb-mentions__required--' + mark.kind" [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'">{{ mark.text }}</span>
+        }
+      </label>
+    }
+    <textarea
+      #field
+      class="cb-mentions__field"
+      [class.cb-is-invalid]="fieldState.invalid()"
+      [id]="inputId"
+      [rows]="rows()"
+      [value]="value()"
+      [placeholder]="placeholder()"
+      [disabled]="isDisabled()"
+      [required]="fieldState.required()"
+      aria-autocomplete="list"
+      [attr.aria-controls]="open() ? listId : null"
+      [attr.aria-activedescendant]="open() ? activeId() : null"
+      [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+      [attr.aria-describedby]="hint() ? inputId + '-hint' : null"
+      [attr.aria-label]="label() ? null : (ariaLabel() || null)"
+      (input)="onInput($event)"
+      (keydown)="onKeydown($event)"
+      (click)="detect()"
+      (blur)="onBlur()"
+    ></textarea>
+    @if (hint()) {
+      <p class="cb-mentions__hint" [id]="inputId + '-hint'">{{ hint() }}</p>
+    }
+    <div class="cb-mentions__sr" role="status">{{ announcement() }}</div>
+
+    <ng-template #panel>
+      <ul class="cb-mentions__panel" role="listbox" [id]="listId" [attr.aria-label]="label() || ariaLabel() || null">
+        @for (item of results(); track item.id; let i = $index) {
+          <li
+            class="cb-mentions__option"
+            role="option"
+            [id]="listId + '-' + i"
+            [class.cb-mentions__option--active]="i === active()"
+            [attr.aria-selected]="i === active()"
+            (mousedown)="$event.preventDefault()"
+            (mousemove)="active.set(i)"
+            (click)="choose(item)"
+          >
+            <span class="cb-mentions__avatar" aria-hidden="true">
+              @if (item.avatar) {
+                <img [src]="item.avatar" alt="" />
+              } @else {
+                {{ initials(item) }}
+              }
+            </span>
+            <span class="cb-mentions__text">
+              <span class="cb-mentions__name">{{ item.label }}</span>
+              @if (item.description) {
+                <span class="cb-mentions__description">{{ item.description }}</span>
+              }
+            </span>
+          </li>
+        } @empty {
+          <li class="cb-mentions__empty" role="presentation">{{ loading() ? t().loading : t().noResults }}</li>
+        }
+      </ul>
+    </ng-template>
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans)}.cb-mentions__label{display:block;margin-bottom:var(--cb-space-1);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-mentions__required{margin-left:2px;color:var(--cb-color-danger)}.cb-mentions__required--required,.cb-mentions__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}.cb-mentions__field{box-sizing:border-box;display:block;width:100%;padding:var(--cb-space-2) var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-base);line-height:1.5;resize:vertical;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-mentions__field::placeholder{color:var(--cb-color-text-muted)}.cb-mentions__field:hover:not(:disabled):not(:focus){border-color:var(--cb-color-text-muted)}.cb-mentions__field:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-mentions__field.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-mentions__field:disabled{cursor:not-allowed;background-color:var(--cb-color-surface);color:var(--cb-color-text-muted)}.cb-mentions__hint{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm)}.cb-mentions__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.cb-mentions__panel{width:18rem;max-width:calc(100vw - 2rem);max-height:16rem;margin:0;padding:.375rem;overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans);list-style:none}.cb-mentions__option{display:flex;align-items:center;gap:.625rem;padding:.375rem .5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-mentions__option--active{background:var(--cb-color-surface-hover);box-shadow:inset 3px 0 0 var(--cb-color-primary)}.cb-mentions__avatar{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--cb-color-primary) 14%,transparent);color:var(--cb-color-primary);font-size:.6875rem;font-weight:var(--cb-font-weight-semibold, 600)}.cb-mentions__avatar img{width:100%;height:100%;object-fit:cover}.cb-mentions__text{display:flex;flex-direction:column;min-width:0}.cb-mentions__name,.cb-mentions__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-mentions__description{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-mentions__empty{padding:.75rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"] }]
+        }], propDecorators: { fieldEl: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], triggers: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggers", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], mentionsChange: [{ type: i0.Output, args: ["mentionsChange"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/mentions
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbMentions, cbCaretCoordinates };

package/fesm2022/caribeng-ui-menu.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, input, output, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, input, computed, output, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Popup menu anchored to any trigger element. */
 class CbMenu {
@@ -15,6 +15,9 @@ class CbMenu {
         this.destroyRef = inject(DestroyRef);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
@@ -71,6 +74,7 @@ class CbMenu {
             event.preventDefault();
             return;
         }
+        cbRunCommand(item, event);
         this.itemSelect.emit(item);
         this.hide();
     }
@@ -100,7 +104,7 @@ class CbMenu {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMenu, isStandalone: true, selector: "cb-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", hidden: "hidden" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #content>
       <div class="cb-menu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu) || null" (click)="onPanelClick($event)">
-        @for (item of items(); track $index) {
+        @for (item of visibleItems(); track $index) {
           @if (item.separator) {
             <div class="cb-menu__separator" role="separator"></div>
           } @else {
@@ -140,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], template: `
     <ng-template #content>
       <div class="cb-menu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu) || null" (click)="onPanelClick($event)">
-        @for (item of items(); track $index) {
+        @for (item of visibleItems(); track $index) {
           @if (item.separator) {
             <div class="cb-menu__separator" role="separator"></div>
           } @else {

package/fesm2022/caribeng-ui-menubar.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Injector, input, output, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, Injector, input, computed, output, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Horizontal navigation bar with optional one-level dropdown menus. */
 class CbMenubar {
@@ -12,6 +12,9 @@ class CbMenubar {
         this.injector = inject(Injector);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
@@ -26,6 +29,7 @@ class CbMenubar {
             event.preventDefault();
             return;
         }
+        cbRunCommand(item);
         this.itemSelect.emit(item);
         if (parentIndex !== undefined)
             this.openIndex.set(null);
@@ -57,7 +61,7 @@ class CbMenubar {
             this.openIndex.set(null);
             return;
         }
-        if (event.key === 'ArrowDown' && root && this.items()[rootIndex]?.items?.length) {
+        if (event.key === 'ArrowDown' && root && this.visibleItems()[rootIndex]?.items?.length) {
             event.preventDefault();
             this.openIndex.set(rootIndex);
             // El submenú se pinta en el siguiente render (zoneless): se enfoca después.
@@ -75,7 +79,7 @@ class CbMenubar {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMenubar, isStandalone: true, selector: "cb-menubar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "keydown": "onKeydown($event)", "document:click": "onDocumentClick($event)" }, classAttribute: "cb-menubar" }, ngImport: i0, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().mainNavigation)">
       <ul class="cb-menubar__list" role="menubar">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-menubar__entry" role="none">
             @if (item.items?.length) {
               <button
@@ -136,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     }, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().mainNavigation)">
       <ul class="cb-menubar__list" role="menubar">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-menubar__entry" role="none">
             @if (item.items?.length) {
               <button

package/fesm2022/caribeng-ui-message.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 import { injectCbTranslation } from '@caribeng/ui';
 
@@ -36,6 +36,9 @@ class CbMessage {
         /** Visibilidad (two-way). */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** danger y warning se anuncian al momento (`alert`); el resto, sin interrumpir (`status`). */
+        this.urgent = computed(() => this.severity() === 'danger' || this.severity() === 'warning', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urgent" }] : /* istanbul ignore next */ []));
         /** Se emite al cerrar. */
         this.closed = output();
         this.iconName = computed(() => {
@@ -53,7 +56,7 @@ class CbMessage {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMessage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMessage, isStandalone: true, selector: "cb-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", closed: "closed" }, host: { classAttribute: "cb-message-host" }, ngImport: i0, template: `
     @if (visible()) {
-      <div class="cb-message" [class]="'cb-message--' + severity()" role="alert">
+      <div class="cb-message" [class]="'cb-message--' + severity()" [attr.role]="urgent() ? 'alert' : 'status'">
         @if (iconName()) {
           <cb-icon class="cb-message__icon" [name]="iconName()" [size]="18" aria-hidden="true" />
         }
@@ -71,7 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Component,
             args: [{ selector: 'cb-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-message-host' }, template: `
     @if (visible()) {
-      <div class="cb-message" [class]="'cb-message--' + severity()" role="alert">
+      <div class="cb-message" [class]="'cb-message--' + severity()" [attr.role]="urgent() ? 'alert' : 'status'">
         @if (iconName()) {
           <cb-icon class="cb-message__icon" [name]="iconName()" [size]="18" aria-hidden="true" />
         }