@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-kbd.mjs

@@ -0,0 +1,122 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/** Teclas con nombre: `mod` es ⌘ en Mac y Ctrl en el resto. */
+const NAMED_KEYS = {
+    mod: { mac: { text: '⌘', spoken: 'Command' }, other: { text: 'Ctrl' } },
+    cmd: { mac: { text: '⌘', spoken: 'Command' }, other: { text: 'Win' } },
+    ctrl: { mac: { text: '⌃', spoken: 'Control' }, other: { text: 'Ctrl' } },
+    alt: { mac: { text: '⌥', spoken: 'Option' }, other: { text: 'Alt' } },
+    shift: { mac: { text: '⇧', spoken: 'Shift' }, other: { text: 'Shift' } },
+    enter: { mac: { text: '↵', spoken: 'Enter' }, other: { text: 'Enter' } },
+    backspace: { mac: { text: '⌫', spoken: 'Delete' }, other: { text: 'Backspace' } },
+    tab: { mac: { text: 'Tab' }, other: { text: 'Tab' } },
+    esc: { mac: { text: 'Esc' }, other: { text: 'Esc' } },
+    space: { mac: { text: 'Space' }, other: { text: 'Space' } },
+    up: { mac: { text: '↑', spoken: 'Up' }, other: { text: '↑', spoken: 'Up' } },
+    down: { mac: { text: '↓', spoken: 'Down' }, other: { text: '↓', spoken: 'Down' } },
+    left: { mac: { text: '←', spoken: 'Left' }, other: { text: '←', spoken: 'Left' } },
+    right: { mac: { text: '→', spoken: 'Right' }, other: { text: '→', spoken: 'Right' } },
+};
+/** Detecta macOS/iOS en el navegador (en SSR devuelve `false`). */
+function isApplePlatform(doc) {
+    const nav = doc.defaultView?.navigator;
+    const platform = nav?.userAgentData?.platform ?? nav?.platform ?? '';
+    return /mac|iphone|ipad|ipod/i.test(platform);
+}
+/**
+ * Tecla o atajo de teclado de CaribeNG. Con contenido muestra una tecla; con
+ * `keys` muestra la combinación (⌘ K en Mac, Ctrl + K en el resto).
+ *
+ * @example
+ * ```html
+ * <cb-kbd>Esc</cb-kbd>
+ * <cb-kbd [keys]="['mod', 'K']" />
+ * ```
+ */
+class CbKbd {
+    constructor() {
+        this.doc = inject(DOCUMENT);
+        /** Teclas de la combinación: nombres (`mod`, `shift`, `alt`, `enter`, `up`…) o texto libre (`K`, `F2`). */
+        this.keys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keys" }] : /* istanbul ignore next */ []));
+        /** Plataforma a mostrar. `auto` la detecta (⌘ en Mac). */
+        this.platform = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "platform" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.isMac = computed(() => {
+            const platform = this.platform();
+            return platform === 'auto' ? isApplePlatform(this.doc) : platform === 'mac';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMac" }] : /* istanbul ignore next */ []));
+        this.labels = computed(() => {
+            const mac = this.isMac();
+            return this.keys().map((key) => {
+                const named = NAMED_KEYS[key.toLowerCase()];
+                if (named)
+                    return mac ? named.mac : named.other;
+                return { text: key.length === 1 ? key.toUpperCase() : key };
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbKbd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbKbd, isStandalone: true, selector: "cb-kbd", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, platform: { classPropertyName: "platform", publicName: "platform", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-kbd--sm": "size() === 'sm'" }, classAttribute: "cb-kbd" }, ngImport: i0, template: `
+    @if (labels().length) {
+      <kbd class="cb-kbd__combo">
+        @for (key of labels(); track $index) {
+          @if (!$first && !isMac()) {
+            <span class="cb-kbd__plus" aria-hidden="true">+</span>
+          }
+          <kbd class="cb-kbd__key">
+            @if (key.spoken) {
+              <span aria-hidden="true">{{ key.text }}</span><span class="cb-kbd__sr">{{ key.spoken }}</span>
+            } @else {
+              {{ key.text }}
+            }
+          </kbd>
+        }
+      </kbd>
+    } @else {
+      <kbd class="cb-kbd__key"><ng-content /></kbd>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;vertical-align:middle;font-size:var(--cb-text-xs, .75rem)}.cb-kbd__combo{display:inline-flex;align-items:center;gap:.25em;font:inherit}.cb-kbd__key{display:inline-flex;align-items:center;justify-content:center;min-width:1.75em;height:1.75em;padding:0 .4em;border:1px solid var(--cb-color-border-strong);border-bottom-width:2px;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:inherit;font-weight:var(--cb-font-weight-medium, 500);line-height:1;white-space:nowrap}.cb-kbd__plus{color:var(--cb-color-text-muted)}:host(.cb-kbd--sm){font-size:.6875rem}.cb-kbd__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbKbd, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-kbd', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        class: 'cb-kbd',
+                        '[class.cb-kbd--sm]': "size() === 'sm'",
+                    }, template: `
+    @if (labels().length) {
+      <kbd class="cb-kbd__combo">
+        @for (key of labels(); track $index) {
+          @if (!$first && !isMac()) {
+            <span class="cb-kbd__plus" aria-hidden="true">+</span>
+          }
+          <kbd class="cb-kbd__key">
+            @if (key.spoken) {
+              <span aria-hidden="true">{{ key.text }}</span><span class="cb-kbd__sr">{{ key.spoken }}</span>
+            } @else {
+              {{ key.text }}
+            }
+          </kbd>
+        }
+      </kbd>
+    } @else {
+      <kbd class="cb-kbd__key"><ng-content /></kbd>
+    }
+  `, styles: [":host{display:inline-flex;vertical-align:middle;font-size:var(--cb-text-xs, .75rem)}.cb-kbd__combo{display:inline-flex;align-items:center;gap:.25em;font:inherit}.cb-kbd__key{display:inline-flex;align-items:center;justify-content:center;min-width:1.75em;height:1.75em;padding:0 .4em;border:1px solid var(--cb-color-border-strong);border-bottom-width:2px;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:inherit;font-weight:var(--cb-font-weight-medium, 500);line-height:1;white-space:nowrap}.cb-kbd__plus{color:var(--cb-color-text-muted)}:host(.cb-kbd--sm){font-size:.6875rem}.cb-kbd__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], propDecorators: { keys: [{ type: i0.Input, args: [{ isSignal: true, alias: "keys", required: false }] }], platform: [{ type: i0.Input, args: [{ isSignal: true, alias: "platform", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/kbd
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbKbd };

package/fesm2022/caribeng-ui-keyfilter.mjs

@@ -0,0 +1,72 @@
+import * as i0 from '@angular/core';
+import { input, Directive } from '@angular/core';
+
+/** Caracteres permitidos por cada filtro predefinido (se comprueba carácter a carácter). */
+const PRESETS = {
+    int: /[\d-]/,
+    pint: /\d/,
+    num: /[\d\-.,]/,
+    pnum: /[\d.,]/,
+    money: /[\d.,]/,
+    alpha: /[a-záéíóúüñ\s]/i,
+    alphanum: /[a-z0-9áéíóúüñ\s]/i,
+    hex: /[0-9a-f]/i,
+    email: /[a-z0-9@._+-]/i,
+};
+/**
+ * KeyFilter de CaribeNG: limita los caracteres que se pueden escribir en un
+ * `input` o `textarea`. Usa el evento `beforeinput`, así filtra lo tecleado,
+ * lo pegado y lo autocompletado (no solo las teclas).
+ *
+ * Solo restringe la entrada: valida el formato final con Validators en el formulario.
+ *
+ * @example
+ * ```html
+ * <input cbKeyFilter="pint" inputmode="numeric" aria-label="Número de cédula" />
+ * <input [cbKeyFilter]="/[A-Z0-9]/" aria-label="Placa" />
+ * ```
+ */
+class CbKeyFilter {
+    constructor() {
+        /** Filtro predefinido o expresión que debe cumplir cada carácter. */
+        this.cbKeyFilter = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cbKeyFilter" }] : /* istanbul ignore next */ []));
+    }
+    /** ¿Se acepta este texto? (cada carácter debe cumplir el filtro). */
+    allows(text) {
+        const filter = this.cbKeyFilter();
+        const pattern = filter instanceof RegExp ? new RegExp(filter.source, filter.flags.replace('g', '')) : PRESETS[filter];
+        if (!pattern)
+            return true;
+        return [...text].every((ch) => pattern.test(ch));
+    }
+    onBeforeInput(e) {
+        const event = e;
+        // Borrar, deshacer o mover texto siempre se permite; solo se filtra lo que se inserta.
+        if (!event.inputType?.startsWith('insert'))
+            return;
+        const text = event.data ?? event.dataTransfer?.getData('text/plain') ?? '';
+        if (text && !this.allows(text))
+            event.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbKeyFilter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbKeyFilter, isStandalone: true, selector: "input[cbKeyFilter], textarea[cbKeyFilter]", inputs: { cbKeyFilter: { classPropertyName: "cbKeyFilter", publicName: "cbKeyFilter", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "beforeinput": "onBeforeInput($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbKeyFilter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[cbKeyFilter], textarea[cbKeyFilter]',
+                    standalone: true,
+                    host: { '(beforeinput)': 'onBeforeInput($event)' },
+                }]
+        }], propDecorators: { cbKeyFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbKeyFilter", required: true }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/keyfilter
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbKeyFilter };

package/fesm2022/caribeng-ui-listbox.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, model, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CbIcon } from '@caribeng/ui/icon';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -18,6 +18,8 @@ let nextUid = 0;
  */
 class CbListBox {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.options = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.optionLabel = input('label', /* @ts-ignore */
@@ -28,9 +30,9 @@ class CbListBox {
         ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.filter = input(false, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: toBoolean });
-        this.filterPlaceholder = input('Buscar…', /* @ts-ignore */
+        this.filterPlaceholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
-        this.emptyMessage = input('Sin resultados', /* @ts-ignore */
+        this.emptyMessage = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: toBoolean });
         /** Marca visual y ARIA de estado inválido (también se activa con Angular Forms). */
@@ -187,11 +189,11 @@ class CbListBox {
           <input
             type="text"
             class="cb-listbox__filter-input"
-            [placeholder]="filterPlaceholder()"
+            [placeholder]="(filterPlaceholder() ?? t().search)"
             [value]="filterText()"
             [disabled]="isDisabled()"
             (input)="onFilter($event)"
-            aria-label="Filtrar opciones"
+            [attr.aria-label]="t().filterOptions"
           />
         </div>
       }
@@ -230,12 +232,12 @@ class CbListBox {
           </li>
         } @empty {
           <li class="cb-listbox__empty" role="option" aria-disabled="true">
-            {{ emptyMessage() }}
+            {{ (emptyMessage() ?? t().noResults) }}
           </li>
         }
       </ul>
     </div>
-  `, isInline: true, styles: [":host{display:block}.cb-listbox{border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);font-family:var(--cb-font-sans);overflow:hidden}.cb-listbox.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55)}.cb-listbox__filter{padding:var(--cb-space-2);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-listbox__filter-input{width:100%;padding:var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-listbox__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-listbox__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto;outline:none}.cb-listbox__list:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring);border-radius:var(--cb-radius-sm)}.cb-listbox__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);color:var(--cb-color-text);cursor:pointer}.cb-listbox__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:var(--cb-color-primary-50)}.cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium)}.cb-listbox__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-listbox__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-listbox__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-listbox__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-200)}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}.cb-listbox.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.cb-listbox{border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);font-family:var(--cb-font-sans);overflow:hidden}.cb-listbox.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55)}.cb-listbox__filter{padding:var(--cb-space-2);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-listbox__filter-input{width:100%;padding:var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-listbox__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-listbox__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto;outline:none}.cb-listbox__list:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring);border-radius:var(--cb-radius-sm)}.cb-listbox__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);color:var(--cb-color-text);cursor:pointer}.cb-listbox__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:var(--cb-color-primary-50)}.cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium)}.cb-listbox__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-listbox__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-listbox__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-listbox__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-200)}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}.cb-listbox.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbListBox, decorators: [{
             type: Component,
@@ -252,11 +254,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <input
             type="text"
             class="cb-listbox__filter-input"
-            [placeholder]="filterPlaceholder()"
+            [placeholder]="(filterPlaceholder() ?? t().search)"
             [value]="filterText()"
             [disabled]="isDisabled()"
             (input)="onFilter($event)"
-            aria-label="Filtrar opciones"
+            [attr.aria-label]="t().filterOptions"
           />
         </div>
       }
@@ -295,12 +297,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           </li>
         } @empty {
           <li class="cb-listbox__empty" role="option" aria-disabled="true">
-            {{ emptyMessage() }}
+            {{ (emptyMessage() ?? t().noResults) }}
           </li>
         }
       </ul>
     </div>
-  `, styles: [":host{display:block}.cb-listbox{border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);font-family:var(--cb-font-sans);overflow:hidden}.cb-listbox.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55)}.cb-listbox__filter{padding:var(--cb-space-2);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-listbox__filter-input{width:100%;padding:var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-listbox__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-listbox__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto;outline:none}.cb-listbox__list:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring);border-radius:var(--cb-radius-sm)}.cb-listbox__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);color:var(--cb-color-text);cursor:pointer}.cb-listbox__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:var(--cb-color-primary-50)}.cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium)}.cb-listbox__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-listbox__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-listbox__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-listbox__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-200)}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}.cb-listbox.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
+  `, styles: [":host{display:block}.cb-listbox{border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);font-family:var(--cb-font-sans);overflow:hidden}.cb-listbox.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55)}.cb-listbox__filter{padding:var(--cb-space-2);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-listbox__filter-input{width:100%;padding:var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-listbox__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-listbox__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto;outline:none}.cb-listbox__list:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring);border-radius:var(--cb-radius-sm)}.cb-listbox__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);color:var(--cb-color-text);cursor:pointer}.cb-listbox__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:var(--cb-color-primary-50)}.cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium)}.cb-listbox__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-listbox__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-listbox__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-listbox__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected{color:var(--cb-color-primary-200)}:host-context([data-theme=\"dark\"]) .cb-listbox__option.cb-is-selected:not(.cb-is-active){background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}.cb-listbox.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-megamenu.mjs

@@ -1,43 +1,189 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, Injector, input, computed, output, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 import { CbIcon } from '@caribeng/ui/icon';
 
-/** Horizontal category menu with multi-column panels. */
+let nextUid = 0;
+/**
+ * Menú de categorías con paneles de varias columnas (patrón *disclosure
+ * navigation* de WAI-ARIA). Teclado: ←/→ entre categorías, ↓ abre el panel y
+ * entra al primer enlace, ↑/↓ recorre los enlaces y Escape cierra devolviendo
+ * el foco a la categoría.
+ *
+ * @example
+ * ```html
+ * <cb-megamenu [items]="categorias" (itemSelect)="navegar($event)" />
+ * ```
+ */
 class CbMegaMenu {
     constructor() {
-        this.host = inject((ElementRef));
+        this.t = injectCbTranslation();
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
+        this.panelId = `cb-megamenu-${++nextUid}-panel`;
+        /** Categorías con sus grupos de enlaces. */
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Categories', /* @ts-ignore */
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible de la navegación. Por defecto, "Categorías" del idioma activo. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Se emite al elegir un enlace. */
         this.itemSelect = output();
         this.openIndex = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "openIndex" }] : /* istanbul ignore next */ []));
     }
-    toggle(index) { this.openIndex.update((current) => current === index ? null : index); }
-    select(link) { if (!link.disabled) {
+    toggle(index) {
+        this.openIndex.update((current) => (current === index ? null : index));
+    }
+    select(link) {
+        if (link.disabled)
+            return;
+        cbRunCommand(link);
         this.itemSelect.emit(link);
         this.close();
-    } }
-    close() { this.openIndex.set(null); }
-    onDocumentClick(event) { if (!this.host.nativeElement.contains(event.target))
-        this.close(); }
+    }
+    close() {
+        this.openIndex.set(null);
+    }
+    onDocumentClick(event) {
+        if (!this.host.nativeElement.contains(event.target))
+            this.close();
+    }
+    /** Al salir el foco del componente (p. ej. con Tab), se cierra el panel. */
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && !this.host.nativeElement.contains(next))
+            this.close();
+    }
+    onTriggerKeydown(event, index) {
+        const count = this.visibleItems().length;
+        switch (event.key) {
+            case 'ArrowRight':
+                this.focusTrigger((index + 1) % count);
+                break;
+            case 'ArrowLeft':
+                this.focusTrigger((index - 1 + count) % count);
+                break;
+            case 'Home':
+                this.focusTrigger(0);
+                break;
+            case 'End':
+                this.focusTrigger(count - 1);
+                break;
+            case 'ArrowDown':
+                this.openIndex.set(index);
+                afterNextRender(() => this.links()[0]?.focus(), { injector: this.injector });
+                break;
+            case 'Escape':
+                this.close();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    onPanelKeydown(event) {
+        const links = this.links();
+        const current = links.indexOf(document.activeElement);
+        switch (event.key) {
+            case 'ArrowDown':
+                links[Math.min(links.length - 1, current + 1)]?.focus();
+                break;
+            case 'ArrowUp':
+                if (current <= 0)
+                    this.focusTrigger(this.openIndex());
+                else
+                    links[current - 1].focus();
+                break;
+            case 'Home':
+                links[0]?.focus();
+                break;
+            case 'End':
+                links[links.length - 1]?.focus();
+                break;
+            case 'Escape': {
+                const index = this.openIndex();
+                this.close();
+                this.focusTrigger(index);
+                break;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /** Enlaces navegables del panel abierto, en orden de lectura. */
+    links() {
+        return Array.from(this.host.nativeElement.querySelectorAll('.cb-megamenu__panel .cb-megamenu__link:not([disabled])'));
+    }
+    focusTrigger(index) {
+        this.host.nativeElement.querySelectorAll('.cb-megamenu__trigger')[index]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMegaMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMegaMenu, isStandalone: true, selector: "cb-megamenu", 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: { "document:click": "onDocumentClick($event)", "keydown.escape": "close()" }, classAttribute: "cb-megamenu" }, ngImport: i0, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMegaMenu, isStandalone: true, selector: "cb-megamenu", 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: { "document:click": "onDocumentClick($event)", "focusout": "onFocusOut($event)" }, classAttribute: "cb-megamenu" }, ngImport: i0, template: `
+    <nav [attr.aria-label]="ariaLabel() ?? t().categories">
       <ul class="cb-megamenu__bar">
-        @for (item of items(); track $index; let i = $index) {
-          <li><button class="cb-megamenu__trigger" type="button" [attr.aria-expanded]="openIndex() === i" aria-haspopup="true" (click)="toggle(i)">@if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }{{ item.label }}<cb-icon class="cb-megamenu__chevron" [class.cb-megamenu__chevron--open]="openIndex() === i" name="chevron-down" [size]="14" aria-hidden="true" /></button></li>
+        @for (item of visibleItems(); track $index; let i = $index) {
+          <li>
+            <button
+              class="cb-megamenu__trigger"
+              type="button"
+              [attr.aria-expanded]="openIndex() === i"
+              [attr.aria-controls]="openIndex() === i ? panelId : null"
+              (click)="toggle(i)"
+              (keydown)="onTriggerKeydown($event, i)"
+            >
+              @if (item.icon) {
+                <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+              }
+              {{ item.label }}
+              <cb-icon
+                class="cb-megamenu__chevron"
+                [class.cb-megamenu__chevron--open]="openIndex() === i"
+                name="chevron-down"
+                [size]="14"
+                aria-hidden="true"
+              />
+            </button>
+          </li>
         }
       </ul>
       @if (openIndex() !== null) {
-        <section class="cb-megamenu__panel" role="region" [attr.aria-label]="items()[openIndex()!].label">
-          @for (group of items()[openIndex()!] .groups; track $index) {
-            <div class="cb-megamenu__group"><h3>{{ group.label }}</h3><ul>
-              @for (link of group.items; track $index) {
-                <li>@if (link.url && !link.disabled) { <a class="cb-megamenu__link" [href]="link.url" (click)="select(link)">@if (link.icon) { <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" /> }{{ link.label }}</a> } @else { <button class="cb-megamenu__link" type="button" [disabled]="link.disabled" (click)="select(link)">@if (link.icon) { <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" /> }{{ link.label }}</button> }</li>
-              }
-            </ul></div>
+        <section
+          class="cb-megamenu__panel"
+          [id]="panelId"
+          role="region"
+          [attr.aria-label]="visibleItems()[openIndex()!].label"
+          (keydown)="onPanelKeydown($event)"
+        >
+          @for (group of visibleItems()[openIndex()!].groups; track $index) {
+            <div class="cb-megamenu__group">
+              <h3>{{ group.label }}</h3>
+              <ul>
+                @for (link of group.items; track $index) {
+                  <li>
+                    @if (link.url && !link.disabled) {
+                      <a class="cb-megamenu__link" [href]="link.url" (click)="select(link)">
+                        @if (link.icon) {
+                          <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" />
+                        }
+                        {{ link.label }}
+                      </a>
+                    } @else {
+                      <button class="cb-megamenu__link" type="button" [disabled]="link.disabled" (click)="select(link)">
+                        @if (link.icon) {
+                          <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" />
+                        }
+                        {{ link.label }}
+                      </button>
+                    }
+                  </li>
+                }
+              </ul>
+            </div>
           }
         </section>
       }
@@ -46,21 +192,71 @@ class CbMegaMenu {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMegaMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-megamenu', '(document:click)': 'onDocumentClick($event)', '(keydown.escape)': 'close()' }, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+            args: [{ selector: 'cb-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: {
+                        class: 'cb-megamenu',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, template: `
+    <nav [attr.aria-label]="ariaLabel() ?? t().categories">
       <ul class="cb-megamenu__bar">
-        @for (item of items(); track $index; let i = $index) {
-          <li><button class="cb-megamenu__trigger" type="button" [attr.aria-expanded]="openIndex() === i" aria-haspopup="true" (click)="toggle(i)">@if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }{{ item.label }}<cb-icon class="cb-megamenu__chevron" [class.cb-megamenu__chevron--open]="openIndex() === i" name="chevron-down" [size]="14" aria-hidden="true" /></button></li>
+        @for (item of visibleItems(); track $index; let i = $index) {
+          <li>
+            <button
+              class="cb-megamenu__trigger"
+              type="button"
+              [attr.aria-expanded]="openIndex() === i"
+              [attr.aria-controls]="openIndex() === i ? panelId : null"
+              (click)="toggle(i)"
+              (keydown)="onTriggerKeydown($event, i)"
+            >
+              @if (item.icon) {
+                <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+              }
+              {{ item.label }}
+              <cb-icon
+                class="cb-megamenu__chevron"
+                [class.cb-megamenu__chevron--open]="openIndex() === i"
+                name="chevron-down"
+                [size]="14"
+                aria-hidden="true"
+              />
+            </button>
+          </li>
         }
       </ul>
       @if (openIndex() !== null) {
-        <section class="cb-megamenu__panel" role="region" [attr.aria-label]="items()[openIndex()!].label">
-          @for (group of items()[openIndex()!] .groups; track $index) {
-            <div class="cb-megamenu__group"><h3>{{ group.label }}</h3><ul>
-              @for (link of group.items; track $index) {
-                <li>@if (link.url && !link.disabled) { <a class="cb-megamenu__link" [href]="link.url" (click)="select(link)">@if (link.icon) { <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" /> }{{ link.label }}</a> } @else { <button class="cb-megamenu__link" type="button" [disabled]="link.disabled" (click)="select(link)">@if (link.icon) { <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" /> }{{ link.label }}</button> }</li>
-              }
-            </ul></div>
+        <section
+          class="cb-megamenu__panel"
+          [id]="panelId"
+          role="region"
+          [attr.aria-label]="visibleItems()[openIndex()!].label"
+          (keydown)="onPanelKeydown($event)"
+        >
+          @for (group of visibleItems()[openIndex()!].groups; track $index) {
+            <div class="cb-megamenu__group">
+              <h3>{{ group.label }}</h3>
+              <ul>
+                @for (link of group.items; track $index) {
+                  <li>
+                    @if (link.url && !link.disabled) {
+                      <a class="cb-megamenu__link" [href]="link.url" (click)="select(link)">
+                        @if (link.icon) {
+                          <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" />
+                        }
+                        {{ link.label }}
+                      </a>
+                    } @else {
+                      <button class="cb-megamenu__link" type="button" [disabled]="link.disabled" (click)="select(link)">
+                        @if (link.icon) {
+                          <cb-icon [name]="link.icon" [size]="16" aria-hidden="true" />
+                        }
+                        {{ link.label }}
+                      </button>
+                    }
+                  </li>
+                }
+              </ul>
+            </div>
           }
         </section>
       }